Icons

Essential principles and patterns for creating consistent user interfaces

Icon Action Reference

The following table provides a comprehensive reference for icon usage, including the specific icon, action type, typical use cases, user experience expectations, and contextual behavior.

IconButton ExampleAction TypeTypical UseFeels LikeContextual Behavior
arrow-left
Go BackReturn to previous screen or sectionNavigating backwardStays on current page; changes view/state
arrow-right
Go ForwardMove to next screen or stepProgressing forwardStays on current page; changes view/state
chevron-down
Expand SectionReveal dropdown, accordion, or collapsible UIUnfoldingToggles visibility within the current page
chevron-up
Collapse SectionHide dropdown or expanded UIFolding upToggles visibility within the current page
chevron-left
Scroll LeftHorizontal carousel or paginationShifting leftMoves view within current content area
chevron-right
Scroll RightHorizontal carousel or paginationShifting rightMoves view within current content area
external-link
External LinkOpen a different website or external appLeaving current experienceOpens new tab/window; leaves the current domain
refresh-ccw
Refresh / RetryRetry a failed action or reload contentResetting / trying againReloads content inside the current page context
arrow-up-right
Open Modal / ContextLaunch modal, preview, or expanded panelBranching out / exploringStays on current page; opens overlay or modal
arrow-down-right
Drill DownNavigate to details or sub-processDescending into specificsReplaces or updates current page view
download
DownloadSave file (PDF, CSV, etc.)Taking something offlineTriggers download; stays on current page
plus-circle
Add ItemCreate new item, open creation modalCreating / initiatingStays on current page; may open modal or form
trash-2
Delete ItemPermanently remove an item or recordDestructive actionRemoves item from system; may show confirmation dialog
square-pen
Edit ItemModify existing content or settingsMaking changesOpens edit form or inline editing mode
Getting Started
Visual Signifiers