Icon
A small hand-drawn picture that goes with a word. It helps recognition; the word explains.
On this page
Playground
calendar
Icon
Background
<span class="feitio-inline" data-gap="1" style="font-size: var(--feitio-font-size-h3)"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg><span>calendar</span></span>When to use
- Next to a word: in a button, a navigation item, a status tag.
- On its own, only when the meaning is universal (search, close) and the control has a name for screen readers.
When not to use
- To decorate a heading or a paragraph.
- To illustrate an empty screen: use the illustrations (EmptyState).
- From another set: no ready-made icon next to the drawn ones.
Examples
Three sizes
Small (16px), the size of the surrounding text (no attribute) and large (32px). Always in the text color.
Show code
<svg class="feitio-icon" data-size="small" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" data-size="large" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>Every icon, with search and its code, is in the icon catalog.
Do and don’t
Do
Calendar
Icon and word together, in the same color.
Don’t
General settings
An orange icon decorating a heading: it helps no recognition and spends the orange.
Accessibility
- The icon is always
aria-hidden="true": the word next to it, or the button’saria-label, gives the name. - In React, the icon name is checked by TypeScript.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-icon" | required | Hand-drawn stroke, in the text color. |
data-size | none, "small", "large" | The text size (no attribute), 16px or 32px. |
aria-hidden="true" | always | The icon goes along; the word gives the name. |
use href | sprite.svg#feitio-<nome> | Which icon. |