Pictograms
Not the same thing as icons. These are three-colour illustrations on a 96px artboard, used at 48px and above to stand for a service or an idea. The monoline interface icons that go in buttons and rows live on the Icons page.
Construction
Every pictogram is drawn on a 96 × 96 artboard in three colours. Charcoal carries the line work at a 4px stroke, one orange dot is the focal point, and tan handles the supporting marks: corner brackets, secondary dots, and flat fills. Nothing else. Scale them proportionally and never below 32px, where the tan detail starts to close up.
Charcoal
#1A1C20 — all line work, 4px strokeOrange
#FF5200 — the focal dot, one per pictogramTan
#F3C892 — brackets, secondary dots, flat fillsThe set
34 pictograms. Click any tile to download the SVG.
Motion
Seven of the pictograms are animated, each a short loop that resolves back to the still version. All run at 40ms a frame: the two second loops are 50 frames, the four second ones 100. Supplied at 768 × 768, shown here at 192.
Usage
Do
- Keep the three-colour palette exactly as drawn
- Scale proportionally from the 96px artboard
- Use one pictogram per idea, at a consistent size across a layout
Don't
- Recolour, add a fourth colour, or flatten to one tone
- Set them below 32px, where the tan detail closes up
- Adjust the stroke weight independently of the pictogram
- Mix these with a third-party illustration set in the same layout
- Draw new pictograms without matching the 4px stroke and single orange dot