Skip to content
HeyOz
Foundations3,096 icons

Icons

The icon grid, its rules, the HeyOz icons and the whole Lucide library redrawn on the grid.

Source
icons/heyoz/ + lucide-static
Figma
Pages Icons (25:48) + Iconography (25:6154)
In code
<svg><use href="/icons/lucide.svg#name"/></svg>

Grid

Every icon is drawn on this grid in a 24 frame. The grid is stored as ratios of the frame, so it works at any size.

Token
Ratio
At 24
size/icon/grid/padding
0.0833
2px
size/icon/grid/square
0.75
18px
size/icon/grid/circle
0.8333
20px
size/icon/grid/stroke
0.0625
1.5px
1 · FrameMake a frame 24 × 24.
2 · Pixel gridAdd a 1px layout grid.
3 · LinesDiagonals and centre lines.
4 · Key shapesPadding square, circle, key square.

HeyOz icons fill the key square: the longest side is frame × 0.75 (18 at 24), centred, so at least 1/8 of the frame stays clear on every side. Round, tall and wide shapes may reach the circle (20 at 24) when they look too small; never past the padding. Export every icon as its frame, never as the bare vector.

Sizes

Three sizes. Each has its own line weight and corner radius, so lines stay crisp.

Size
Use for
Line
Corner radius
Key square
16 × 16
Toolbars, small buttons
1px
1px
12px
24 × 24
Standard UI
1.5px
2px
18px
32 × 32
Large UI, banners, heroes
2px
4px
24px

Rules

From the Iconography page in Figma (25:6154).

DoSimplify icons for clarity and legibility.Keep one visual style across the set.Place every point on the pixel grid.Keep one line weight and one terminal style.
Don’tDon’t be literal. Avoid complex icons.Don’t mix styles in one set.Don’t place anything on half pixels.Don’t mix line weights or terminals.
When
What to do
Key shapes
Follow them. A small nudge to fit a key shape improves balance, especially at small sizes.
Breaking key shapes
Only when forcing the shape would distort the icon. Legibility wins.
Dots in line icons
Use an in-between size when grid units make them too small or too large.
Combined icons
Two icons together may use more of the grid to avoid empty space.

HeyOz icons

1077 icons from Figma (Icons, 25:48), as drawn. Single-colour icons take the text colour; logos, flags and emoji keep their colours. Click an icon to download it.

1,077 of 1,077

General · 53

CircleIcons/ChartsIcons/emailGoogleMicrosoftAppleX TwitterShopping-bagoffice-briefcasetrendinfotickcrosshomegridmagic-wandnodehistory-clockfolderdnaflash-lighteningidea-bulbatommegaphonecalendarhelp-questiongiftglobecalculatorstackvideocharactermenushop-storecolorlanguagecheck-fancylaptopcolor-pickerpencil-edittrash-binlinkcaptionsettingsmsuicmovie-filmstampbox-containerminimizesearchtagtrophyaward

arrow · 8

leftrightdowndown-leftdown-rightupup-leftup-right

Chevron · 9

left Defaultleft Smallright Defaultright Smalldown Defaultdown Smallup Defaultup Smallup-down Default

sparkle · 3

outlinefilledfilled - single

diamond · 2

outlinefilled

star · 2

outlinedfilled

user · 2

single user 1Multiple user

square · 2

outlinedfilled

volume · 3

Open -filledOpenMute

upload · 3

simplesimple 2cloud-upload

download · 3

simplesimple 2cloud-upload

menu-dots · 2

verticalhorizontal

heart · 2

outlinedfilled

trend · 2

updown
Loading icons…

Lucide library

All 2019 Lucide icons (v1.67.0) redrawn on the HeyOz grid: longest side 18 in the 24 frame, centred, 1.5px line. Click an icon to download it.

2,019 of 2,019
a-arrow-downa-arrow-upa-large-smallaccessibilityactivityadair-ventairplayalarm-clock-checkalarm-clock-minusalarm-clock-offalarm-clock-plusalarm-clockalarm-smokealign-center-horizontalalign-center-verticalalign-end-horizontalalign-end-verticalalign-horizontal-distribute-centeralign-horizontal-distribute-endalign-horizontal-distribute-startalign-horizontal-justify-centeralign-horizontal-justify-endalign-horizontal-justify-startalign-horizontal-space-aroundalign-horizontal-space-betweenalign-start-horizontalalign-start-verticalalign-vertical-distribute-centeralign-vertical-distribute-endalign-vertical-distribute-startalign-vertical-justify-centeralign-vertical-justify-endalign-vertical-justify-startalign-vertical-space-aroundalign-vertical-space-betweenambulanceampersandampersandsamphoraanchorangleantennaanvilapertureapp-window-macapp-windowapplearchive-arrow-downarchive-arrow-uparchive-xarchivearmchairarmenian-dramarrow-big-down-dasharrow-big-downarrow-big-left-dasharrow-big-leftarrow-big-right-dasharrow-big-rightarrow-big-up-dasharrow-big-uparrow-down-0-1arrow-down-1-0arrow-down-a-zarrow-down-from-linearrow-down-leftarrow-down-narrow-widearrow-down-rightarrow-down-to-dotarrow-down-to-linearrow-down-uparrow-down-wide-narrowarrow-down-z-aarrow-downarrow-left-from-linearrow-left-rightarrow-left-to-linearrow-leftarrow-right-from-linearrow-right-leftarrow-right-to-linearrow-rightarrow-up-0-1arrow-up-1-0arrow-up-a-zarrow-up-downarrow-up-from-dotarrow-up-from-linearrow-up-leftarrow-up-narrow-widearrow-up-rightarrow-up-to-linearrow-up-wide-narrowarrow-up-z-aarrow-up
Loading icons…