콘텐츠로 이동

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

Media

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
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

  1. One library per UI. Mixing produces inconsistent stroke widths and cap rules.
  2. 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.
  3. 24px is the default size. 16px for inline-with-text, 32–48px for hero/empty states.
  4. Icons that convey meaning need an accessible name. <Icon aria-label="Close"> or paired text. Decorative icons get aria-hidden="true".
  5. 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