Icons
Glyphs drawn on one 24px grid, rendered by one component.
An icon is an asset, not a value — which is what puts this page in Foundations beside the tokens rather than among them. A token is a number or a colour you can look up; a glyph is artwork, and the only way to know whether it is the right one is to look at it.
Each glyph is a plain value you import and pass: <Icon glyph={iconSun} />. There is no registry and no name string, so a page that uses two icons ships two — see /components/icon for the API and the sizes.
The set
Every glyph the system has, in the order the module exports them — so this list cannot fall behind the code.
| Icon | Name | Usage |
|---|---|---|
| iconAlert | Attention marker with no fixed severity | |
| iconAlertFill | Attention marker, filled — carries colour at small sizes | |
| iconArrowDown | Move down, sort descending | |
| iconArrowLeft | Move left, previous | |
| iconArrowRight | Move right, next, continue | |
| iconArrowUp | Move up, sort ascending | |
| iconBag | Shopping bag, retail basket | |
| iconBell | Notifications, reminders, subscribe | |
| iconBellRing | Notifications arriving, alerting | |
| iconBellSlash | Notifications muted, unsubscribed | |
| iconBluetooth | Bluetooth connectivity | |
| iconBookmark | Save for later, unsaved | |
| iconBookmarkFill | Saved for later | |
| iconCalendar | Dates, scheduling, date pickers | |
| iconCamera | Take a photo, capture, change an avatar | |
| iconCart | Shopping cart, checkout | |
| iconCheck | Confirm, done, checked | |
| iconCheckBold | The mark inside a Checkbox — a compact, heavier tick for a 16px box | |
| iconCheckbox | Checkbox, unchecked | |
| iconCheckboxChecked | Checkbox, checked | |
| iconCheckboxMixed | Checkbox, some but not all children selected — mixed, or DOM indeterminate | |
| iconChevronDown | Open a dropdown, expand | |
| iconChevronLeft | Back, previous page | |
| iconChevronRight | Forward, next page, drill in | |
| iconChevronUp | Close a dropdown, collapse | |
| iconChevronsDownUp | Collapse a region | |
| iconChevronsLeft | Jump to first | |
| iconChevronsRight | Jump to last | |
| iconChevronsUpDown | Expand a region; sortable column, unsorted | |
| iconClock | Times, durations, timestamps | |
| iconClose | Dismiss a dialog, panel or chip | |
| iconCode | Code sample, developer view | |
| iconCodeAlt | ||
| iconCookie | Cookie consent, tracking preferences | |
| iconCopy | Copy to clipboard | |
| iconCreditCard | Payment method, billing | |
| iconDataChart | Chart view | |
| iconDataColumns | Column view, column settings | |
| iconDataGrid | Grid view, tiles | |
| iconDataRows | Row view, list density | |
| iconDelete | Delete permanently | |
| iconDownload | Download, save to device | |
| iconDragHandle | Grip for reordering rows and lists | |
| iconEdit | Edit, rename, compose | |
| iconEmail | Email, messages, contact | |
| iconError | Error status — something is broken | |
| iconErrorFill | Error status, filled | |
| iconExternalLink | Opens in a new tab or leaves the site | |
| iconEye | Visibility — shown, or preview | |
| iconEyeSlash | Visibility — hidden, or masked input | |
| iconFile | A document or file | |
| iconFilter | Filter a set, refine results | |
| iconFolder | A folder or collection | |
| iconGithub | ||
| iconHeart | Like, not yet liked | |
| iconHeartFill | Liked | |
| iconHelp | Help, hints, explanatory tooltips | |
| iconHelpFill | Help, filled | |
| iconHome | Home, dashboard, start | |
| iconImage | An image or media asset | |
| iconInfo | Informational status, neutral notice | |
| iconInfoFill | Informational status, filled | |
| iconLink | Copy or anchor a link to this | |
| iconLock | Locked, private, secured | |
| iconLockOpen | Unlocked, public, editable | |
| iconLogOut | Sign out, leave the session | |
| iconMenu | Navigation menu, mobile nav toggle | |
| iconMinus | Remove one, decrement, collapse | |
| iconMinusBold | The mixed-state bar inside a Checkbox, the tick's own weight and width | |
| iconMoon | Dark mode | |
| iconMoreHorizontal | Overflow menu, in a row | |
| iconMoreVertical | Overflow menu, in a list | |
| iconPause | Pause playback | |
| iconPlaceholder | An icon is not chosen yet — an empty slot, not a thing | |
| iconPlay | Start playback, run | |
| iconPlus | Add one, increment, new | |
| iconRadio | Radio button, unselected | |
| iconRadioChecked | Radio button, selected | |
| iconRefresh | Reload, retry, run again | |
| iconSearch | Search inputs, find | |
| iconSettings | Settings, preferences, configuration | |
| iconShare | Share to another app or person | |
| iconShield | Security, protection, trust | |
| iconStar | Favourite or rate, unset | |
| iconStarFill | Favourited, or a filled rating | |
| iconStop | Stop playback, halt | |
| iconSuccess | Success status — it worked | |
| iconSuccessFill | Success status, filled | |
| iconSun | Light mode | |
| iconSwapVertical | Swap two things, exchange | |
| iconTag | Label, category, keyword | |
| iconTagFill | Label applied | |
| iconUpload | Upload, export out of the app | |
| iconUser | A person, account, profile | |
| iconWarning | Warning status — attention, nothing broken | |
| iconWarningFill | Warning status, filled | |
| iconWifi | Network connected | |
| iconWifiSlash | Network unavailable, offline |
The Usage column is the part a picture cannot carry. Three of these glyphs are variations on an exclamation mark and two are ticks; what separates them is the job, not the drawing, and that is the thing you are actually choosing between.
Pairs run outline then Fill. The filled form is not a decorative alternative — at small sizes a thin outline carries almost none of its colour, so a status glyph that has to read as amber at 16px wants the solid one. The same suffix means on across the set: iconStarFill is a favourite that has been set, iconCheckboxChecked a box that has been ticked.
Naming
Two conventions are visible in the table, and they are one rule. Where many drawings serve one role, the name is the role — delete is a trash can, an X or a minus depending on the product, so iconDelete names the job and lets the picture be whatever it is. Where one drawing serves many roles, the name is the shape — there is exactly one bell, and it means notifications, reminders, subscribe and sound-on, so iconBell names what it draws and leaves the job open.
Naming that bell iconNotification would pick one of its four jobs and be wrong about the other three. Where the mapping is one-to-one — search, settings, filter, menu, email — either name would do and convention picks.
The corollary is an accessibility rule rather than a naming one: the accessible name belongs to the control, not the glyph inside it. A button says what it does (<button aria-label="Notifications">) and the icon stays silent, so the name survives the glyph being swapped, removed, or joined by visible text. A glyph named for a role is competing with its own control for the same claim.
One deliberate exception: iconAlert carries a role word while claiming no role. A circle-and-exclamation genuinely has no fixed job, and iconExclamationCircle is accurate and unreadable.
Licence and provenance
The artwork is Boxicons v3.0.8, whose free icons are released under CC BY 4.0 — free to share and adapt, including commercially, with attribution. Boxicons’ own terms are at docs.boxicons.com/free. Their MIT licence covers their code, not the icons; the two are often confused.
This paragraph is the attribution, and it is required. Boxicons note that attribution is already embedded in each downloaded SVG — but every one of those comments was stripped when the glyphs were reduced to path data, along with the width, height and fill attributes that would have fought currentColor. Having removed the notice, the credit has to live somewhere, and a comment in a source file is not somewhere anybody looks.
Three glyphs were drawn rather than sourced. iconCheckboxMixed, because Boxicons ships a filled square where a minus is the universal mark — it is their box with the bar set at their own inset. iconDragHandle, because they have no grip: it is their apps dot on a two-by-three at their seven-unit pitch, since dropping a column from apps would have left the pair off-centre. And iconShare, taken from Material’s silhouette, which measures the same two-unit stroke at this scale, then compressed to Boxicons’ padding.
That padding is the reason the set reads evenly. Every glyph keeps its uncropped 24 viewBox, with the artwork inside roughly 20 of it — the live area, and what makes a wide glyph and a tall one appear the same size side by side. Cropping to the artwork would make each icon as large as its own bounding box, which is a different size for every one of them.