Icon Design

Icons are the smallest part of a visual language, and the part people see most. They set how a product feels before anyone reads a word: round or sharp, light or heavy, playful or precise. Getting them right takes hundreds of small, consistent decisions about grids, weights and corners. Here are the icon systems I designed and led for Square, ClassDojo, Flow and Blackletter.

Square

Square · 100 icons · Light and Regular · 150-unit grid

I was Head of Design at Square from 2011 to 2016 and grew the design team from 3 to 50. The Square icon system spans payments, hardware, staff and appointments. Every icon comes in two weights, and Regular is redrawn rather than thickened: gaps, line ends and dots are tuned for the heavier line.

Two weights, drawn separately

Light · Regular

Tablet / Register, Light

Tablet / Register, Regular

Magstripe, Light

Magstripe, Regular

Contactless, Light

Contactless, Regular

Receipt, Light

Receipt, Regular

Inventory, Light

Inventory, Regular

Customer, Light

Customer, Regular

Open Sign, Light

Open Sign, Regular

Appointments, Light

Appointments, Regular

Analytics, Light

Analytics, Regular

Jewel / Square, Light

Jewel / Square, Regular

All icons

Hover, focus or tap to enlarge

Search 100 Square Icon System icons

Show alternates100 icons

ClassDojo Privacy & Security

ClassDojo · 12 icons · 64-unit grid

Privacy and security are hard ideas to draw. For ClassDojo, each of these twelve icons ties one of them to a familiar object, like a key for Safety and a picket fence for Community. Every tile uses the same three layers on a 64-unit grid: a coloured tile, a darker shade and a white symbol.

Safety: Key

Community: Picket fence

Security: Padlock

Essential: ID card

Private: Briefcase

Industry-leading: Award seal with ribbon

Kids: Two children side by side

Oversight: Parent figure sheltering a child

Messages: Overlapping speech bubbles

District: School building with bell-tower

Records: File tray with folder

Rules: Scroll with quill

Dojo Icon Family

ClassDojo · 225 icons · Solid and line · 24-unit grid

As VP of Design at ClassDojo, I led the Dojo Icon Family: 225 icons drawn to one set of rules. Each starts on a 64-unit template and scales down to 24, with a 5pt stroke, 3pt gaps and a set radius for every kind of corner. Thirty-seven come in both solid and line.

Icon rules

Template · Grid · Details

Icon template64 → 24 px

Each icon is drawn on a 64px template, then scaled down to 24px for the final set.

The grid

The inner shape is 75% of the outer shape.
Size objects optically. Circles break slightly out of the box so they look as big as square shapes.
Size most shapes to the inner shape. The outer shape is the limit.

Stroke5pt

Icons drawn with strokes use a 5pt width and rounded ends.

Inner stroke4pt

Strokes inside solid icons are 4pt.

Separation3pt

Gaps between shapes are 3pt.

90° angle1pt

90° angles are rounded 1pt.

Obtuse angle3pt

Obtuse angles are rounded 3pt.

Acute angle0.5pt

Very acute angles are rounded 0.5pt.

All icons

Hover, focus or tap to enlarge

Search 225 Dojo Icon Family icons

225 icons

Dojo Design System

ClassDojo · 185 icons · 64-unit grid

The icon set for the Dojo Design System: 185 icons, sorted by category. Every icon is solid, and five also come in a line version.

Search 185 Dojo Design System icons

185 icons

Flow

Flow · 174 icons · Line and solid · 64-unit grid

I designed every Flow icon myself while I was CEO of Flow, during my time as CEO in Residence at Tiny. The interface icons share one 6-unit line on a 64-unit grid, and every doctype starts from the same page shape.

Doctypes and interface icons

36 doctypes · 24 interface

Generic file

Blank file

Text document

Zip archive

Spreadsheet

Image file

Photo file

Video file

Audio file

Calendar file

Email file

Contact card

Code file

Markdown file

Design file

Settings file

Apple file

Android file

Word document

Excel spreadsheet

PowerPoint presentation

Figma file

Sketch file

GIF image

PDF document

Photoshop file

Illustrator file

InDesign file

After Effects file

Flash file

Google Drive file

Dropbox file

OneDrive file

Box file

Disk image

Database file

Home

Bookmark

Flag

Lightbulb

Link

Compose

Trash

Mail open

Music

Camera

Heart

Lightning

Cloud

Person

Mention

Attachment

Brush

Command

Lock

Code

Team

Hourglass

All icons

Hover, focus or tap to enlarge

Search 174 Flow icons

174 icons

Flow App Icon

Flow · 1 mark · 17 colourways

The Flow app icon comes in seventeen colourways. The default is a white mark on Zaffre Blue. The other sixteen flip it to a white tile and colour the mark with one gradient, light at the top and dark at the bottom, so every version still reads as Flow.

Zaffre Blue · 01 / 17

Glass explorations

Rebrand

Blackletter

Blackletter · 18 icons · 64-unit grid

Every Blackletter icon shares one construction: a 2-unit line on a 64-unit grid, built inside a frame, a keyline square, a keyline circle and centre axes. That shared grid is what lets a pyramid, a flag and a node lattice read as one family.

Pick an icon to inspect01 / 06 · 64 × 64

Isometric stepped pyramid with a raised capstone

Pyramid

Extended set

12 icons

Process

2 images

Flow Emoji

Flow · 4 emoji

I drew four emoji for Flow: a lightning bolt, a heart, a flame and a star. They share one soft, rounded 3D style and one bright palette, so they read as a set.

Collaborators

Louie Mantia
Luka Grafera
Brad Ellis

Elsewhere