Icons
58 icons, 16×16, 1.25 stroke, square ends, sharp joins, in currentColorUse like a font: <i class="icon-cog" aria-hidden="true"></i>. The size is the font size, the color is the text color. An icon that carries meaning alone gets role="img" aria-label="…"; an icon-only button gets aria-label on the button. Also as a sprite (<svg width="1em" height="1em"><use href="../icons.svg#cog"/></svg>, for places without ui.css) and as single files in icons/.
All
archivearrow-downarrow-leftarrow-rightarrow-upbellcalendarchartcheckchevron-downchevron-leftchevron-rightchevron-upclockcogcontrastcopydashboarddownloadediterroreuroexternaleyefilefilterfolderhelphomeinfokeylinklistlockmailmenuminusmoonmoreokpauseplaypluspowerprintrefreshsearchsendstarstopsuntagtrashuploaduseruserswarningx
Colors
Text tokens for plain icons, the accent for interactive ones, state colors only for state (as --c-text, so they keep their contrast).
--fg
--muted
--accent
ok
pend
bad
run
Sizes
12 px
16 px
20 px
24 px
32 px
48 px
In buttons and elsewhere
An icon goes before the text, the same size as the text; an icon alone needs aria-label on its button or link. Create, edit, delete and copy get their icon from the class alone (.new .edit .del .copy).
| where | looks | markup |
|---|---|---|
| primary action | <button class="pri new">New customer</button> | |
| edit, delete, copy | <button class="edit">Edit</button> | |
| any other action | <button><i class="icon-download" aria-hidden="true"></i> Export CSV</button> | |
| with a shortcut | …Send <kbd>s</kbd> | |
| icon only | <button class="round" aria-label="refresh"><i class="icon-refresh"… | |
| link out | Open in auth docs | icon after the text: it says where you go |
| menu | More | <summary class="btn">More <i class="icon-chevron-down"… |
| pager, steps | back | chevrons step, arrows go somewhere |
| chips, tabs | all42 starred3 | sparingly: only when the icon is the faster read |
| messages | October is not closed. | automatic: error, ok, warning, info by the message class |
| state | up down waiting | <i class="icon-ok" role="img" aria-label="up"> plus a word |
| input | as the unit of an .affix | |
| empty state | No files yet. | one large muted icon above the text |