24 px canvas
Every icon sits on a 24 by 24 grid. Points snap to quarter-pixel steps, so lines land cleanly on screen.
How we draw
How we draw an icon
Every icon goes through the same five steps before it ships.
The steps
Five steps from idea to icon
Every icon in the library went through these steps, in this order.
Name the idea
Each field has a list of ideas its products need. An idea used in several fields, like a stethoscope, is one icon with several tags.
Write the picture
Each idea gets a one-line picture of what the icon shows. The picture is approved before drawing starts. Close ideas get different pictures.
Draw one master
The icon is drawn once, as a master on a 24 by 24 grid. The master marks which part is the object and which is the detail.
Build the styles
The build turns that master into all 15 styles: four weights in rounded and sharp, the layered styles and the effects.
Check at 16 px
Each drawing is checked at 16 px next to well-known sets. Only icons marked good ship. If it fails, it goes back for a redraw.
Step one
Picture first
Most bad icons are bad before anyone draws them.
The idea was vague, or the picture tried to be clever. So we agree on the picture in words first.
A picture is one line, like "a padlock with the shackle open" or "a parcel with a clock". We use the picture people already know for the idea, so it reads at 16 px without a label. Then we draw it our own way.
We never drop or merge ideas to make the list shorter. When two ideas are close, like a delay and a scheduled delivery, each one gets its own picture. That way you can tell them apart on a screen.
The rules
One grid for every icon
Every icon in every field follows the same rules.
Round ends
Rounded styles use round ends and round corners. Sharp styles use square ends, from the same lines.
Shared keylines
Circles, squares and tall or wide shapes use set sizes. So icons look the same size even when their shapes differ.
Room to breathe
A minimum gap between parts keeps shapes open in every weight, from Thin to Bold.
Even weight
We measure how much ink each icon uses. Icons much heavier or lighter than the rest get a second look.
Few strokes
If a detail does not help the icon read at 16 px, we take it out.
The build
One drawing, 15 styles
Each icon is drawn once, and the build does the rest.
A script turns the master into four stroke weights, each in rounded and sharp. The master knows which part is the object and which is the detail. So the build can also draft Solid, Duotone, Twotone and Bulk, and those drafts are checked too. Gradient, Glass and Tile are effects on top.
That is why every style of an icon matches. It is one drawing shown in 15 ways.
Unique means one drawing for each idea. The 15 styles of an icon count as one icon, not as 15.
Quality
Checked before an icon ships
Every drawing is checked against four well-known sets.
Each drawing is shown next to the same idea in four well-known open source sets. The check asks plain questions. Does it read at 16 px? Is it the picture people expect? Is the weight even? Is it ours?
Only icons marked good ship. Each verdict is tied to the exact shape. If we redraw an icon, its old verdict no longer counts and it gets reviewed again.
Why we look at other sets
We look at other sets to learn the pictures people expect, like a magnifier for search. We never import, trace, copy or change their paths, in any style. Those reference files stay outside the project and never ship.
Originality
Checked for lookalikes
A lookalike check runs on every master before release.
The check compares each master with thousands of open source icons. One score finds the icons that look closest. A check mark in a circle will always look like other check marks in circles, so this score alone blocks nothing. A second score looks for tracing: points that sit almost exactly on another set's points.
A high tracing score blocks release until we redraw the icon. The first time we ran the check, it caught a few of our own icons that had landed on the obvious grid choice. We redrew them.
Growth
We add icons every month
Each month, more ideas get pictures, drawings and reviews.
13,491 unique icons. Every one in 15 styles. That is 202,365 SVGs, and we add more every month. Each new icon arrives in all 15 styles at once.
FAQ
Questions
Do you trace or copy icons from other sets?
No. Every icon is original to this library, drawn on our own grid. We compare finished drawings with well-known open source sets to check that ours show the expected picture and are not copies. A lookalike check blocks any icon whose points sit too close to an icon in another set.
Why approve the picture before drawing?
Because the picture decides whether an icon works. A clear, familiar picture drawn simply works better than a clever one drawn well. Agreeing on the picture first also keeps close ideas apart. Two ideas never end up as the same drawing with different names.
What happens to an icon that fails review?
It goes back for a redraw with the notes from the check. A redraw clears the old verdict, so the new drawing is reviewed from the start. Icons that still fail after their redraws are held back. Nothing ships until it is marked good.
Why is the icon grid 24 px?
A 24 by 24 grid is a common size for interface icons, and it divides into clean steps. It leaves room for detail but still shrinks to 16 px without turning to mush. Drawing every icon on the same grid also keeps size and weight the same across the library.
What are keylines in icon design?
Keylines are guide shapes on the grid, such as a circle, a square and a tall and a wide rectangle. Icons are drawn to fit them, so a round icon and a square icon look the same size next to each other. They are why a set feels even.
What does an open counter mean in an icon?
A counter is the empty space inside or between strokes. Keeping it open means the gaps do not close up when the icon is small or bold. We keep a minimum gap between parts, so shapes stay readable at 16 px and in every weight.
See the result
Every icon in the browser went through these steps. Open one in Studio to see it on the grid.
About this page
Every UIX icon starts as a one-line picture that is approved before drawing starts. Each icon is one master on a 24 px grid, and the build turns it into 15 styles. Every icon is checked against Hugeicons, Lucide, Tabler and Phosphor at 16 px before it ships, and only icons marked good ship. Nothing is traced or copied.