back to the desk
ROLE
UX Designer
COMPANY
openstroke, a Sketchish company
TIMELINE
9 months
SCOPE
Brief, metaphors, sketches, 48 px grid, vectors, Figma library, SVG delivery
CASE STUDY
01 — THE STUDIO
openstroke is the icon studio inside Sketchish. A client brings a theme and a list of ideas. I turn it into a ready-to-use icon family. This page shows 53 icons from three client themes.
02 — THE BRIEF
Every request starts as a theme and a rough list. Before drawing, I answer three questions:
Which ideas need an icon
One line per icon, with what it must mean.
Where the icons will live
Web, product, slides or print.
→ The sizes they must survive
The smallest size sets the level of detail.
These answers become the checklist for the finished set.
03 — THE DECISION LOG
Every set shares one construction. These are the four calls behind it.
D01
A 48 px master, not 24
→
One 48 px master, scaled down
Every set is drawn on a 48 × 48 master and ships at 24 and 48 px.
EXHIBIT · THE GRID
48 px canvas, 4 px padding, four keyline shapes.
D02
One 2 px stroke for every set
→
One stroke, round caps and joins, everywhere
2 px on every icon, with round caps and round joins.
D03
4 px of padding and four keylines
→
Fit every icon to keylines inside a 40 px live area
Ø40 circle, 36 px square, 32 × 40 and 40 × 32 rectangles — every icon centred.
D04
One silhouette for every avatar
→
One body; only the face changes
Eyes, mouth and at most one accessory change. The body never does.
EXHIBIT · ANATOMY
The robot at 10× inside its 40 px live area.
ALSO DECIDED
Emblems on the circle keyline
Emblems use the Ø40 circle and the house stroke, so they match the product icons.
Names describe the shape
ai/robot-chat, not ai/support. Name what you see.
currentColor for every stroke
One colour token recolours the whole set, light or dark.
Whole-pixel anchors
Points snap to the grid, so edges stay crisp.
04 — THE SET
53 icons from three requests, all on one grid and one stroke.
EXHIBIT · THE THEMES
Each theme adds one rule: open dots for circuits, one body for avatars, the circle keyline for emblems.
AI & TECH · 14 ICONS
mind-settings
brain-ai
brain-circuit
eye-network
robot
chip-circuit
robot-chat
chip-ai
head-circuit
search-neural
chip-brain
eye-circuit
brain-chip
robot-headset
EXPRESSIVE AVATARS · 28 ICONS
worried
queasy
tongue-wink
annoyed
silly
laughing
smile
devil
kiss
sick
tongue-out
surprised
cyclops
nerd
mustache
heart-eyes
love
winged
goggles
dizzy
meh
crowned
cap
blush
kiss-heart
ranting
angry
angry-devil
POP-CULTURE EMBLEMS · 11 ICONS
x-circle
bird
shield-s
ring
r-mark
bolt
bolt-circle
four-circle
eagle
lantern
a-circle
05 — TESTING
A set ships only when every icon passes all three.
SIZE
CHECK
16, 20, 24, 32 and 48 px
HOW
Next to the set, on the pixel grid
PASSES WHEN
The silhouette reads at 20 px and up
CONTRAST
CHECK
The icon against its background
HOW
Measured on light and dark surfaces
PASSES WHEN
3:1 or better — navy on white is 13.2:1
THEME
CHECK
Light and dark
HOW
One currentColor stroke and one colour token
PASSES WHEN
No second set of files is needed
06 — MY PROCESS
The same six steps, for five icons or fifty.
1
Read the brief
The ideas, the sizes and where the icons will live.
2
Choose the metaphors
Two or three ideas per icon. Keep the one people get fastest.
3
Sketch the silhouettes
Quick sketches fix the shape before any grid work.
4
Build on the grid
48 px master, 2 px stroke, snapped to whole pixels.
5
Test at size
16 to 48 px, light and dark, next to the set.
6
Package and deliver
Named Figma components, optimised SVGs and a usage sheet.
07 — DELIVERY
Three formats, the same names everywhere.
DELIVERABLE 1
Figma library
Named components at 24 and 48 px, colour from a token
DELIVERABLE 2
SVG and PNG set
currentColor SVGs, plus PNG at 1x and 2x
DELIVERABLE 3
Usage sheet
Grid, stroke, padding and sizing rules on one page
08 — WHAT I CARRY FORWARD
Start from the smallest size
I sketch at the smallest size first. It decides the detail.
Write the rules down
Grid, stroke and padding live on the usage sheet, so new icons fit right away.
Test the set, not the icon
An icon is done only when it fits the family at every size.
Every new icon should look like it always belonged.