Iconography and illustration
The guidelines for icons and illustrations, drawn by hand and tied to process: the hand that drew them stays visible. The full catalogs are in Resources.
On this page
Icons
Everything drawn by hand, the same way as the corners: the line runs past the corner, the circle does not close, the dot is not round, and the whole drawing leans a little.
How a Feitio icon is drawn
- 24 grid
- every icon in a 24 by 24 frame
- 2.3 stroke
- round ends and joints
- Tilted 3°
- like someone drawing fast
- Text color
- never a fixed color
- Strokes only
- no perfect circle or rectangle
No icon is a single line
Every joint is two strokes crossing: the two legs of the check, the two arcs of the circle, the two sides of the arrow. A continuous line looks machine-made.
Do
Two legs crossing at the vertex.
Don’t
One continuous line with a perfect corner: the check of any ready-made set.
The icon goes with the word
It helps recognition; the text explains. On its own, only where the meaning is universal, and with a name for screen readers.
No icons from another set
A ready-made geometric icon next to the drawn ones shows the seam. A new icon gets drawn, following the rules above.
Third-party marks come as they are
The logo of GitHub, an app store, a payment provider: never redrawn by hand nor swapped for a Feitio icon, because the mark belongs to its owner and their rules ask for the original drawing. Only the color may follow the ink, when the mark accepts a single color.
Illustration
Small drawings for empty screens and big errors, by the same hand as the icons: ink in the text color and a touch of orange. They go inside the page, not as an image, so they follow the theme.
Create the first one and it shows up here.
- When: an empty screen, a big error, a welcome. Moments without content, where the drawing keeps company.
- When not: as decoration on cards, headers or every item. Drawings are as rare as the orange.
- In outside facades, illustration belongs to the client: Feitio’s drawings do not appear.