Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
Style rules
Line style only — outline, never solid/filled or duotone. One weight across the whole UI.
Stroke is always stroke-width: 2, at every size. No optical variation by size; this replaces an earlier 1.5px/2px split that never matched how @untitledui/icons actually ships. Round caps and joins.
Colour is always currentColor — the icon inherits its parent's ink so it themes automatically. Never hardcode a hex on an icon.
Blue is reserved: an icon only turns --ds-blue when it marks the active/primary action, same rule as every other element.
Pair an icon with a text label wherever it conveys meaning; icon-only controls need an aria-label.
Sizes
Four steps, aligned to the spacing scale. Optical size, not just box size — smaller icons step up to 2px stroke.
Full set — Untitled UI Line 1121 icons
Hover an icon to copy its SVG or JSX.
No icons match “
Layout 63 icons
table spacing-width-02 spacing-width-01 spacing-height-02 spacing-height-01 rows-03 rows-02 rows-01 minimize-02 minimize-01 maximize-02 maximize-01 list layout-top layout-right layout-left layout-grid-02 layout-grid-01 layout-bottom layout-alt-04 layout-alt-03 layout-alt-02 layout-alt-01 layers-two-02 layers-two-01 layers-three-02 layers-three-01 layer-single intersect-square intersect-circle grid-dots-vertical-center grid-dots-top grid-dots-right grid-dots-outer grid-dots-left grid-dots-horizontal-center grid-dots-bottom grid-dots-blank grid-03 grid-02 grid-01 flex-align-top flex-align-right flex-align-left flex-align-bottom divider distribute-spacing-vertical distribute-spacing-horizontal columns-03 columns-02 columns-01 align-vertical-center-02 align-vertical-center-01 align-top-02 align-top-01 align-right-02 align-right-01 align-left-02 align-left-01 align-horizontal-centre-02 align-horizontal-centre-01 align-bottom-02 align-bottom-01
Charts 49 icons
trend-up-02 trend-up-01 trend-down-02 trend-down-01 presentation-chart-03 presentation-chart-02 presentation-chart-01 pie-chart-04 pie-chart-03 pie-chart-02 pie-chart-01 line-chart-up-05 line-chart-up-04 line-chart-up-03 line-chart-up-02 line-chart-up-01 line-chart-down-05 line-chart-down-04 line-chart-down-03 line-chart-down-02 line-chart-down-01 horizontal-bar-chart-03 horizontal-bar-chart-02 horizontal-bar-chart-01 chart-breakout-square chart-breakout-circle bar-line-chart bar-chart-square-up bar-chart-square-plus bar-chart-square-minus bar-chart-square-down bar-chart-square-03 bar-chart-square-02 bar-chart-square-01 bar-chart-circle-03 bar-chart-circle-02 bar-chart-circle-01 bar-chart-12 bar-chart-11 bar-chart-10 bar-chart-09 bar-chart-08 bar-chart-07 bar-chart-06 bar-chart-05 bar-chart-04 bar-chart-03 bar-chart-02 bar-chart-01
Security 36 icons
shield-02 shield-01 shield-zap shield-tick shield-plus shield-off shield-dollar shield-03 scan passcode-lock passcode lock-unlocked-04 lock-unlocked-03 lock-unlocked-02 lock-unlocked-01 lock-keyhole-square lock-keyhole-circle lock-04 lock-03 lock-02 lock-01 key-02 key-01 folder-shield fingerprint-04 fingerprint-03 fingerprint-02 fingerprint-01 file-shield-03 file-shield-02 file-shield-01 file-lock-03 file-lock-02 file-lock-01 face-id-square face-id
Education 31 icons
trophy-02 trophy-01 telescope stand ruler microscope graduation-hat-02 graduation-hat-01 globe-slated-02 globe-slated-01 glasses-02 glasses-01 compass certificate-02 certificate-01 calculator briefcase-02 briefcase-01 book-open-02 book-open-01 book-closed beaker-02 beaker-01 backpack award-05 award-04 award-03 award-02 award-01 atom-02 atom-01
Development 57 icons
variable terminal-square terminal-circle terminal-browser terminal server-06 server-05 server-04 server-03 server-02 server-01 qr-code-02 qr-code-01 puzzle-piece-02 puzzle-piece-01 package-x package-search package-plus package-check package-minus package git-pull-request git-merge git-commit git-branch-02 git-branch-01 folder-code file-code-02 file-code-01 dataflow-04 dataflow-03 dataflow-02 dataflow-01 database-03 database-02 database-01 data cpu-chip-02 cpu-chip-01 container codepen code-square-02 code-square-01 code-circle-03 code-circle-02 code-circle-01 code-browser code-02 code-01 browser brackets-x brackets-slash brackets-plus brackets-minus brackets-ellipses brackets-check brackets
Arrows 92 icons
switch-vertical-02 switch-vertical-01 switch-horizontal-02 switch-horizontal-01 reverse-right reverse-left refresh-cw-05 refresh-cw-04 refresh-cw-03 refresh-cw-02 refresh-cw-01 refresh-ccw-05 refresh-ccw-04 refresh-ccw-03 refresh-ccw-02 refresh-ccw-01 infinity flip-forward flip-backward expand-06 expand-05 expand-04 expand-03 expand-02 expand-01 corner-up-right corner-up-left corner-right-up corner-right-down corner-left-up corner-left-down corner-down-right corner-down-left chevron-up-double chevron-up chevron-selector-vertical chevron-selector-horizontal chevron-right-double chevron-right chevron-left-double chevron-left chevron-down-double chevron-down arrows-up arrows-triangle arrows-right arrows-left arrows-down arrow-up-right arrow-up-left arrow-up arrow-square-up-right arrow-square-up-left arrow-square-up arrow-square-right arrow-square-left arrow-square-down-right arrow-square-down-left arrow-square-down arrow-right arrow-narrow-up-right arrow-narrow-up-left arrow-narrow-up arrow-narrow-right arrow-narrow-left arrow-narrow-down-right arrow-narrow-down-left arrow-narrow-down arrow-left arrow-down-right arrow-down-left arrow-down arrow-circle-up-right arrow-circle-up-left arrow-circle-up arrow-circle-right arrow-circle-left arrow-circle-down-right arrow-circle-down-left arrow-circle-down arrow-circle-broken-up-right arrow-circle-broken-up-left arrow-circle-broken-up arrow-circle-broken-right arrow-circle-broken-left arrow-circle-broken-down-right arrow-circle-broken-down-left arrow-circle-broken-down arrow-block-up arrow-block-right arrow-block-left arrow-block-down
Finance & eCommerce 79 icons
wallet-05 wallet-04 wallet-03 wallet-02 wallet-01 tag-03 tag-02 tag-01 shopping-cart-03 shopping-cart-02 shopping-cart-01 shopping-bag-03 shopping-bag-02 shopping-bag-01 scales-02 scales-01 sale-04 sale-03 sale-02 sale-01 safe receipt-check receipt piggy-bank-02 piggy-bank-01 gift-02 gift-01 diamond-02 diamond-01 currency-yen-circle currency-yen currency-rupee currency-rupee-circle currency-ruble-circle currency-ruble currency-pound-circle currency-pound currency-euro-circle currency-euro currency-ethereum-circle currency-ethereum currency-dollar-circle currency-dollar currency-bitcoin-circle currency-bitcoin cryptocurrency-04 cryptocurrency-03 cryptocurrency-02 cryptocurrency-01 credit-card-x credit-card-upload credit-card-up credit-card-shield credit-card-search credit-card-refresh credit-card-plus credit-card-minus credit-card-lock credit-card-edit credit-card-download credit-card-down credit-card-check credit-card-02 credit-card-01 coins-swap-02 coins-swap-01 coins-stacked-04 coins-stacked-03 coins-stacked-02 coins-stacked-01 coins-hand coins-04 coins-03 coins-02 coins-01 bank-note-03 bank-note-02 bank-note-01 bank
General 193 icons
link-05 link-04 link-03 link-02 link-01 life-buoy-02 life-buoy-01 info-square info-octagon info-hexagon info-circle home-smile home-line home-05 home-04 home-03 home-02 home-01 help-square help-octagon help-hexagon help-circle hearts heart-square heart-rounded heart-octagon heart-hexagon heart-hand heart-circle heart hash-02 hash-01 google-chrome filter-lines filter-funnel-02 filter-funnel-01 eye-off eye equal-not equal edit-05 edit-04 edit-03 edit-02 edit-01 download-cloud-02 download-cloud-01 download-04 share-03 share-02 share-01 settings-04 settings-03 settings-02 settings-01 search-sm search-refraction search-md search-lg save-03 save-02 save-01 plus-square plus-circle plus placeholder pin-02 pin-01 percent-03 percent-02 percent-01 minus-square minus-circle minus menu-05 menu-04 menu-03 menu-02 menu-01 medical-square medical-cross medical-circle log-out-04 log-out-03 log-out-02 log-out-01 log-in-04 log-in-03 log-in-02 log-in-01 loading-03 loading-02 loading-01 link-external-02 link-external-01 link-broken-02 link-broken-01 zap-square zap-off zap-fast zap-circle zap x-square x x-close x-circle virus upload-cloud-02 upload-cloud-01 upload-04 upload-03 upload-02 upload-01 trash-04 trash-03 trash-02 trash-01 translate-02 translate-01 tool-02 tool-01 toggle-03-right toggle-03-left toggle-02-right toggle-02-left toggle-01-right toggle-01-left target-05 target-04 target-03 target-02 target-01 speedometer-04 speedometer-03 speedometer-02 speedometer-01 slash-octagon slash-divider slash-circle-02 slash-circle-01 share-07 share-06 share-05 share-04 download-03 download-02 download-01 dots-vertical dots-horizontal dots-grid divide-03 divide-02 divide-01 copy-07 copy-06 copy-05 copy-04 copy-03 copy-02 copy-01 cloud-blank-02 cloud-blank-01 check-verified-03 check-verified-02 check-verified-01 check-square-broken check-square check-heart check-done-02 check-done-01 check-circle-broken check-circle check building-08 building-07 building-06 building-05 building-04 building-03 building-02 building-01 bookmark-x bookmark-minus bookmark-check bookmark-add bookmark at-sign asterisk-02 asterisk-01 archive anchor activity-heart activity
Alerts & feedback 26 icons
thumbs-up thumbs-down notification-text notification-message notification-box bell-ringing-04 bell-ringing-03 bell-ringing-02 bell-ringing-01 bell-plus bell-off-03 bell-off-02 bell-off-01 bell-minus bell-04 bell-03 bell-02 bell-01 announcement-03 announcement-02 announcement-01 alert-triangle alert-square alert-octagon alert-hexagon alert-circle
Shapes 25 icons
triangle star-07 star-06 star-05 star-04 star-03 star-02 star-01 square pentagon octagon hexagon-02 hexagon-01 dice-6 dice-5 dice-3 dice-4 dice-2 dice-1 cube-outline cube-04 cube-03 cube-02 cube-01 circle
Users 41 icons
users-x users-up users-right users-plus users-minus users-left users-edit users-down users-check users-01 user-x-02 user-x-01 user-up-02 user-up-01 user-square user-right-02 user-right-01 user-plus-02 user-plus-01 user-minus-02 user-minus-01 user-left-02 user-left-01 user-edit user-down-02 user-down-01 user-circle user-check-02 user-check-01 users-02 user-03 users-03 user-02 user-01 face-wink face-smile face-sad face-neutral face-happy face-frown face-content
Media & devices 108 icons
youtube wifi-off wifi webcam-02 webcam-01 volume-x volume-plus volume-minus volume-min volume-max voicemail video-recorder-off video-recorder usb-flash-drive tv-03 tv-02 tv-01 tablet-02 tablet-01 stop-square stop-circle stop speaker-03 speaker-02 speaker-01 sliders-04 sliders-03 sliders-02 sliders-01 skip-forward skip-back simcard signal-03 signal-02 signal-01 shuffle-02 shuffle-01 rss-02 rss-01 repeat-04 repeat-03 repeat-02 repeat-01 recording-03 recording-02 recording-01 printer power-03 power-02 power-01 podcast play-square play-circle play phone-02 phone-01 pause-square pause-circle music-note-plus music-note-02 music-note-01 mouse monitor-05 monitor-04 monitor-03 monitor-02 monitor-01 modem-02 modem-01 microphone-off-02 microphone-off-01 microphone-02 microphone-01 lightbulb-05 lightbulb-04 lightbulb-03 lightbulb-02 lightbulb-01 laptop-02 laptop-01 keyboard-02 keyboard-01 headphones-02 headphones-01 hard-drive gaming-pad-02 gaming-pad-01 film-03 film-02 film-01 fast-forward fast-backward disc-02 disc-01 clapperboard chrome-cast bluetooth-signal bluetooth-on bluetooth-off bluetooth-connect battery-mid battery-low battery-full battery-empty battery-charging-02 battery-charging-01 airpods airplay
Images 29 icons
image-x image-user-x image-user-up image-user-right image-user-plus image-user-left image-user-down image-user-check image-user image-up image-right image-plus image-left image-down image-check image-05 image-04 image-03 image-02 image-01 flash-off flash colors camera-plus camera-off camera-lens camera-03 camera-02 camera-01
Communication 58 icons
send-03 send-02 send-01 phone-x phone-plus phone-pause phone-outgoing-02 phone-outgoing-01 phone-incoming-02 phone-incoming-01 phone-hang-up phone-call-02 phone-call-01 phone message-x-square message-x-circle message-text-square-02 message-text-square-01 message-text-circle-02 message-text-circle-01 message-square-02 message-square-01 message-smile-square message-smile-circle message-question-square message-question-circle message-plus-square message-plus-circle message-notification-square message-notification-circle message-heart-square message-heart-circle message-dots-square message-dots-circle message-circle-02 message-circle-01 message-check-square message-check-circle message-chat-square message-chat-circle message-alert-square message-alert-circle mail-05 mail-04 mail-03 mail-02 mail-01 inbox-02 inbox-01 annotation-x annotation-question annotation-plus annotation-info annotation-heart annotation-dots annotation-check annotation-alert annotation
Editor 104 icons
zoom-out zoom-in underline-square underline-02 underline-01 type-strikethrough-02 type-strikethrough-01 type-square type-02 type-01 transform text-input subscript strikethrough-square strikethrough-02 strikethrough-01 skew scissors-cut-02 scissors-cut-01 scissors-02 scissors-01 scale-03 scale-02 scale-01 roller-brush right-indent-02 right-indent-01 reflect-02 reflect-01 pilcrow-square pilcrow-02 pilcrow-01 perspective-02 perspective-01 pencil-line pencil-02 pencil-01 pen-tool-plus pen-tool-minus pen-tool-02 pen-tool-01 paragraph-wrap paragraph-spacing palette paint-pour paint move magic-wand-02 magic-wand-01 line-height letter-spacing-02 letter-spacing-01 left-indent-02 left-indent-01 italic-square italic-02 italic-01 image-indent-right image-indent-left heading-square heading-02 heading-01 hand framer figma feather eraser dropper drop dotpoints-02 dotpoints-01 delete cursor-click-02 cursor-click-01 cursor-box cursor-04 cursor-03 cursor-02 cursor-01 crop-02 crop-01 contrast-03 contrast-02 contrast-01 command colors code-snippet-02 code-snippet-01 circle-cut brush-03 brush-02 brush-01 bold-square bold-02 bold-01 bezier-curve-03 bezier-curve-02 bezier-curve-01 attachment-02 attachment-01 align-right align-left align-justify align-center
Time 28 icons
watch-square watch-circle clock-refresh hourglass-03 hourglass-02 hourglass-01 clock-stopwatch clock-snooze clock-rewind clock-plus clock-fast-forward clock-check clock calendar-plus-02 calendar-plus-01 calendar-minus-02 calendar-minus-01 calendar-heart-02 calendar-heart-01 calendar-date calendar-check-02 calendar-check-01 calendar alarm-clock-plus alarm-clock-off alarm-clock-minus alarm-clock-check alarm-clock
Files 57 icons
box sticker-circle sticker-square clipboard-minus clipboard-plus clipboard-x clipboard-check clipboard-download clipboard-attachment clipboard paperclip folder-x folder-closed folder-search folder-question folder-plus folder-minus folder-lock folder-download folder-check folder file-search-03 file-search-02 file-search-01 file-x-03 file-x-02 file-x-01 file-question-03 file-question-02 file-question-01 file-plus-03 file-plus-02 file-plus-01 file-minus-03 file-minus-02 file-minus-01 file-heart-03 file-heart-02 file-heart-01 file-download-03 file-download-02 file-download-01 file-check-03 file-check-02 file-check-01 file-attachment-05 file-attachment-04 file-attachment-03 file-attachment-02 file-attachment-01 file-07 file-06 file-05 file-04 file-03 file-02 file-01
Maps & travel 45 icons
truck-02 truck-01 tram train ticket-02 ticket-01 route rocket-02 plane rocket-01 passport navigation-pointer-off-02 navigation-pointer-off-01 navigation-pointer-02 navigation-pointer-01 marker-pin-06 marker-pin-05 marker-pin-04 marker-pin-03 marker-pin-02 marker-pin-01 mark map-02 map-01 luggage-03 luggage-02 luggage-01 globe-06 globe-05 globe-04 globe-03 globe-02 globe-01 flag-06 flag-05 flag-04 flag-03 flag-02 flag-01 compass-03 compass-02 compass-01 car-02 car-01 bus
