Curated icon sets
Common UI icons indexed by library and category. Pick a single library per project — mixing icon sets in one UI looks unprofessional (different stroke weights, different cap rules).
Libraries indexed
| Library |
Icons cataloged |
Strengths |
| Phosphor |
100 |
Most variants (Thin/Light/Regular/Bold/Fill/Duotone), 1200+ icons. Clean for product UIs. |
| Phosphor (primary) + Heroicons (fallback) |
1 |
— |
| Phosphor (react-native) |
4 |
— |
Common icons by category
Action
| Icon |
Keywords |
Library |
Best for |
plus |
add create new insert |
Phosphor |
Add button create new item |
minus |
remove subtract decrease delete |
Phosphor |
Remove item quantity decrease |
trash |
delete remove discard bin |
Phosphor |
Delete action destructive |
pencil-simple |
pencil modify change update |
Phosphor |
Edit button modify content |
floppy-disk |
disk store persist save |
Phosphor |
Save button persist changes |
download-simple |
export save file download |
Phosphor |
Download file export |
upload-simple |
import file attach upload |
Phosphor |
Upload file import |
copy |
duplicate clipboard paste |
Phosphor |
Copy to clipboard |
share |
social distribute send |
Phosphor |
Share button social |
magnifying-glass |
find lookup filter query |
Phosphor |
Search input bar |
funnel |
sort refine narrow options |
Phosphor |
Filter dropdown sort |
gear |
gear cog preferences config |
Phosphor |
Settings page configuration |
Commerce
| Icon |
Keywords |
Library |
Best for |
shopping-cart |
cart checkout basket buy |
Phosphor |
Shopping cart e-commerce |
shopping-bag |
purchase buy store bag |
Phosphor |
Shopping bag purchase |
credit-card |
payment card checkout stripe |
Phosphor |
Payment credit card |
currency-dollar |
money price currency cost |
Phosphor |
Price money currency |
tag |
label price discount sale |
Phosphor |
Price tag label |
gift |
present reward bonus offer |
Phosphor |
Gift reward offer |
percent |
discount sale offer promo |
Phosphor |
Discount percentage sale |
Communication
| Icon |
Keywords |
Library |
Best for |
envelope |
email message inbox letter |
Phosphor |
Email contact inbox |
chat-circle |
chat comment bubble conversation |
Phosphor |
Chat comment message |
phone |
call mobile telephone contact |
Phosphor |
Phone contact call |
paper-plane-tilt |
submit dispatch message airplane |
Phosphor |
Send message submit |
bell |
notification alert ring reminder |
Phosphor |
Notification bell alert |
Data
| Icon |
Keywords |
Library |
Best for |
chart-bar |
analytics statistics graph metrics |
Phosphor |
Bar chart analytics |
chart-pie |
statistics distribution breakdown |
Phosphor |
Pie chart distribution |
trend-up |
growth increase positive trend |
Phosphor |
Growth trend positive |
trend-down |
decline decrease negative trend |
Phosphor |
Decline trend negative |
activity |
pulse heartbeat monitor live |
Phosphor |
Activity monitor pulse |
database |
storage server data backend |
Phosphor |
Database storage |
Development
| Icon |
Keywords |
Library |
Best for |
code |
develop programming syntax html |
Phosphor |
Code development |
terminal |
console cli command shell |
Phosphor |
Terminal console |
git-branch |
version control branch merge |
Phosphor |
Git branch |
github-logo |
repository code open source |
Phosphor |
GitHub repository |
Device
| Icon |
Keywords |
Library |
Best for |
device-mobile |
mobile phone device touch |
Phosphor |
Mobile smartphone |
device-tablet |
ipad device touch screen |
Phosphor |
Tablet device |
monitor |
desktop screen computer display |
Phosphor |
Desktop monitor |
laptop |
notebook computer portable device |
Phosphor |
Laptop computer |
printer |
print document output paper |
Phosphor |
Printer print |
Files
| Icon |
Keywords |
Library |
Best for |
file |
document page paper doc |
Phosphor |
File document |
file-text |
document text page article |
Phosphor |
Text document article |
folder |
directory organize group files |
Phosphor |
Folder directory |
folder-open |
expanded browse files view |
Phosphor |
Open folder browse |
paperclip |
attachment attach file link |
Phosphor |
Attachment paperclip |
link |
url hyperlink chain connect |
Phosphor |
Link URL hyperlink |
clipboard |
paste copy buffer notes |
Phosphor |
Clipboard paste |
Guideline
| Icon |
Keywords |
Library |
Best for |
icon-fallback-rules |
icon fallback, phosphor, heroicons, any icon, extended set |
Phosphor (primary) + Heroicons (fallback) |
Icon library strategy and fallback rules |
Layout
| Icon |
Keywords |
Library |
Best for |
grid-four |
tiles gallery layout dashboard |
Phosphor |
Grid layout gallery |
list-bullets |
rows table lines items |
Phosphor |
List view rows |
columns |
layout split dual sidebar |
Phosphor |
Column layout split |
arrows-out |
fullscreen expand enlarge zoom |
Phosphor |
Fullscreen maximize |
arrows-in |
reduce shrink collapse exit |
Phosphor |
Minimize reduce |
sidebar |
panel drawer navigation menu |
Phosphor |
Sidebar panel |
Location
| Icon |
Keywords |
Library |
Best for |
map-pin |
location marker place address |
Phosphor |
Location pin marker |
map |
directions navigate geography location |
Phosphor |
Map directions |
compass |
compass direction pointer arrow |
Phosphor |
Navigation compass |
globe |
world international global web |
Phosphor |
Globe world |
| Icon |
Keywords |
Library |
Best for |
image |
photo picture gallery thumbnail |
Phosphor |
Image photo gallery |
video |
movie film play record |
Phosphor |
Video player media |
play |
start video audio media |
Phosphor |
Play button video audio |
pause |
stop halt video audio |
Phosphor |
Pause button media |
speaker-high |
sound audio speaker music |
Phosphor |
Volume audio sound |
microphone |
microphone record voice audio |
Phosphor |
Microphone voice record |
camera |
photo capture snapshot picture |
Phosphor |
Camera photo capture |
Navigation
| Icon |
Keywords |
Library |
Best for |
list |
hamburger menu navigation toggle bars |
Phosphor |
Mobile navigation drawer toggle sidebar |
arrow-left |
back previous return navigate |
Phosphor |
Back button breadcrumb navigation |
arrow-right |
next forward continue navigate |
Phosphor |
Forward button next step CTA |
caret-down |
dropdown expand accordion select |
Phosphor |
Dropdown toggle accordion header |
caret-up |
collapse close accordion minimize |
Phosphor |
Accordion collapse minimize |
house |
homepage main dashboard start |
Phosphor |
Home navigation main page |
x |
close cancel dismiss remove exit |
Phosphor |
Modal close dismiss button |
arrow-square-out |
open new tab external link |
Phosphor |
External link indicator |
Security
| Icon |
Keywords |
Library |
Best for |
lock |
secure password protected private |
Phosphor |
Lock secure |
lock-open |
open access unsecure public |
Phosphor |
Unlock open |
shield |
protection security safe guard |
Phosphor |
Shield protection |
key |
password access unlock login |
Phosphor |
Key password |
eye |
view show visible password |
Phosphor |
Show password view |
eye-slash |
hide invisible password hidden |
Phosphor |
Hide password |
Social
| Icon |
Keywords |
Library |
Best for |
heart |
like love favorite wishlist |
Phosphor |
Like favorite love |
star |
rating review favorite bookmark |
Phosphor |
Star rating favorite |
thumbs-up |
like approve agree positive |
Phosphor |
Like approve thumb |
thumbs-down |
dislike disapprove disagree negative |
Phosphor |
Dislike disapprove |
bookmark |
save later favorite mark |
Phosphor |
Bookmark save |
flag |
report mark important highlight |
Phosphor |
Flag report |
Status
| Icon |
Keywords |
Library |
Best for |
check |
success done complete verified |
Phosphor |
Success state checkmark |
check-circle |
success verified approved complete |
Phosphor |
Success badge verified |
x-circle |
error failed cancel rejected |
Phosphor |
Error state failed |
warning |
warning caution attention danger |
Phosphor |
Warning message caution |
warning-circle |
info notice information help |
Phosphor |
Info notice alert |
info |
information help tooltip details |
Phosphor |
Information tooltip help |
circle-notch |
loading spinner processing wait |
Phosphor |
Loading state spinner |
clock |
time schedule pending wait |
Phosphor |
Pending time schedule |
Style Config
| Icon |
Keywords |
Library |
Best for |
bold-typography-icon-system |
bold typography, editorial, mono label, phosphor, weight reg |
Phosphor (react-native) |
Bold Typography Mobile style: weight="regular". Size 20px fo |
cyberpunk-icon-system |
cyberpunk, neon, glow, hud, phosphor, weight regular, accent |
Phosphor (react-native) |
Cyberpunk Mobile HUD style: weight="regular", color={colors. |
academia-icon-system |
academia, library, brass, ornate, phosphor, weight thin, mut |
Phosphor (react-native) |
Academia (Scholarly Mobile) style: weight="thin" (thin engra |
web3-bitcoin-icon-system |
web3, bitcoin, defi, crypto, neon orange, holographic, blurv |
Phosphor (react-native) |
Bitcoin DeFi Mobile style: weight="regular", color={colors.b |
Time
| Icon |
Keywords |
Library |
Best for |
calendar |
date schedule event appointment |
Phosphor |
Calendar date |
arrows-clockwise |
reload sync update refresh |
Phosphor |
Refresh reload |
arrow-counter-clockwise |
undo back revert history |
Phosphor |
Undo revert |
arrow-clockwise |
redo forward repeat history |
Phosphor |
Redo forward |
User
| Icon |
Keywords |
Library |
Best for |
user |
profile account person avatar |
Phosphor |
User profile account |
users |
team group people members |
Phosphor |
Team group members |
user-plus |
add invite new member |
Phosphor |
Add user invite |
sign-in |
signin authenticate enter |
Phosphor |
Login signin |
sign-out |
signout exit leave logout |
Phosphor |
Logout signout |
Picking an icon library
| Situation |
Pick |
| New React project, Tailwind, default-shadcn |
Lucide |
| Need many weight variants (thin/regular/bold) |
Phosphor |
| Heavy dashboard / data tools |
Tabler |
| Material Design alignment |
Material Symbols (variable font) |
| Tailwind-team alignment |
Heroicons |
| Multi-language support including CJK glyphs |
Remix |
Rules
- One library per UI. Mixing produces inconsistent stroke widths and cap rules.
- Stay in one weight. If you use Phosphor's
regular, don't sprinkle bold for emphasis — pick weight by component (e.g., menu = regular, primary action = bold) and apply consistently.
- 24px is the default size. 16px for inline-with-text, 32–48px for hero/empty states.
- Icons that convey meaning need an accessible name.
<Icon aria-label="Close"> or paired text. Decorative icons get aria-hidden="true".
- Match icon size to text leading. If body line-height is 24px, body-line icons should be 16–20px (sit on the cap-height).
Cross-reference