Icons

Every Feitio icon, drawn by hand. Search by name, in Portuguese or English, and tap to copy the code.

All icons

• Task: copy the codefeitio-taskCopied
• Calendar: copy the codefeitio-calendarCopied
• Search: copy the codefeitio-searchCopied
• Settings: copy the codefeitio-slidersCopied
• Create: copy the codefeitio-plusCopied
• Done: copy the codefeitio-checkCopied
• Close: copy the codefeitio-closeCopied
• Warning: copy the codefeitio-warnCopied
• Info: copy the codefeitio-infoCopied
• Open: copy the codefeitio-chevron-downCopied
• Next: copy the codefeitio-chevron-rightCopied
• Menu: copy the codefeitio-menuCopied

No icon by that name. Need a new one? See how to ask, below.

Tap an icon to copy its code.

How to use

All icons live in one file, icons/sprite.svg. Each is called by name, inherits the surrounding text color and the font size.

<button type="button" class="feitio-button">
  <svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
  Novo agendamento
</button>

• With a word next to it, the icon gets aria-hidden="true": the word explains.
• On its own, its container carries the name: aria-label on the button or link.
• Size comes from the text (1em); for another size, change the surrounding font size or the inline-size.

A new icon

A new icon gets drawn, following the Iconography and illustration rules: two strokes at every joint, tilted, in the text color. The file goes in icons/<name>.svg, and bun run build rebuilds the sprite; Feitio’s test checks the rules.