Type systems / Icon as extension of typography
Cut from the same cloth. Type and Icon Unity.
Five typefaces — Open Sans, Jost, Inter, Satoshi and Quantico — each taken through the same translation, from the anatomy of the O to a working interface set that still reads at 24 pixels.
Type did not stop at the alphabet.
An icon set drawn beside a typeface is a second alphabet with no shared ancestry. An icon set drawn from a typeface inherits its proportions, its counters, its stroke and its stress, and stops being decoration. Five families were taken through the same translation, and the same question was asked of each: what does this face already know how to draw?
Read the O first.
Every translation below starts at the same place — the O — because the O is where a face declares its width, its counter, its stress and the weight relationship between its sides and its top. Once the O is measured, the icon grid is no longer a free choice.
Type anatomy
Open Sans
Semibold 600
Drawn by Steve Matteson and released through Google in 2011. A humanist sans-serif with open apertures and upright stress, tuned for interface text and long-form reading.
- Humanist O, taller than wide at 0.91 w : h
- Vertical stress, sides about 1.24 times the top
- Open, generous counter
- Flat, deliberate terminals
- Lens is the O outline, unchanged
- Same 0.91 counter and side weight
- Handle inherits the thicker side stroke
- Handle terminal cut flat
Type anatomy
Jost
Medium 500
An open-source geometric sans by Owen Earl for the indestructible type* foundry, reworking the Futura-era geometric tradition through near-circular bowls and decisive joints.
- Geometric O on a near-perfect circle at 1.00
- Near-monoline stroke, about 1.09
- Perfectly circular counter
- Even, decisive joints
- Lens is the circular O, unchanged
- Even ring weight carried to the handle
- Counter stays perfectly round
- Handle meets the ring cleanly
Type anatomy
Inter
Semibold 600
Designed by Rasmus Andersson from 2016 as an open-source interface typeface, with a tall x-height and optical corrections that keep it clear at small screen sizes.
- Compact O, taller than wide at 0.89 w : h
- Near-monoline stroke, about 1.12
- Large counter for small sizes
- Tall x-height, shown on the e
- Lens is the compact O outline
- Counter kept open for clarity
- Even ring weight into the handle
- Sized to read at interface scale
Type anatomy
Satoshi
Bold 700
A contemporary sans-serif from the Indian Type Foundry, released free through Fontshare, setting broad circular bowls against flat terminals and angular joints.
- Broad round O at 0.94 w : h
- Near-monoline stroke, about 1.09
- Flat terminals
- Angular joint logic
- Lens is the broad O outline
- Ring weight matched to the family
- Handle terminal cut flat
- Join squared, no dark knot
Letter assembly is not translation.
The naive version of this work glues letterforms together and calls the result an icon. It is legible for about one second. Mature translation does something harder: it carries the construction grammar across — the terminal cut, the joint logic, the counter size, the ratio of stroke to space — and then draws a pictogram that obeys it. The lens of a magnifying glass is the O outline, unchanged. The handle is whatever the family's diagonal already is: humanist and cut flat in Open Sans, rigid in Quantico.
The one that shipped.
The five families above are the study. Public Sans is the answer: Victory sets its interface in it, so Victory’s icons were derived from it rather than bought beside it.
Fifty icons, fourteen categories, one fill-only compound path each on a 24-unit grid, drawn in currentColor so a symbol takes the colour of the sentence it sits in.
The construction rules, carried from the typeface
- Blunt, square terminals derived from Public Sans’ direct grotesque construction.
- Open apertures and generous internal counters for interface clarity.
- Low-contrast, even visual weight with calm rounded joins.
- A compact 24-unit grid, tuned to remain legible at 16–24 px.
- Neutral enough for system UI, but not anonymous: short hooks and firm shoulders remain visible.
Navigation 05
- home
- menu
- close
- search
- location
People 02
- user
- users
System 01
- settings
Communication 02
- phone
Time 02
- calendar
- clock
Actions 09
- link
- external link
- download
- upload
- plus
- minus
- trash
- edit
- share
Directional 08
- chevron left
- chevron right
- chevron up
- chevron down
- arrow left
- arrow right
- arrow up
- arrow down
Status 04
- check
- info
- warning
- question
Objects 04
- heart
- star
- bookmark
- eye
Security 02
- lock
- unlock
Data 04
- filter
- sort
- grid
- list
Media 03
- image
- play
- pause
Files 02
- document
- folder
Brand 02
- compass
- shield
The proof is at 24 pixels.
A system that only works on a specimen sheet has not been designed, it has been illustrated. Each family ships a small-size test because the counter that reads generously at 256 is the counter that closes up first at 24 — and the family whose O has the largest counter for its width is the family whose icons survive furthest down.