Icons that move, morph and fuse.
Original icons on a 24 grid with variable weight, corners and style, a morph engine, fusion, modifier badges and living states. The same props in React, Vue, Svelte, Angular, web components, Tailwind and the CLI.
- icons
- 0
- axes
- 3
- fusion layouts
- 7
- modifiers
- 11
- living states
- 7
glyphfox 1.0 in two and a half minutes.
Every icon, scene and sound in it was made with code.
Drawn on one grid.
Every icon is built on the same 24 by 24 grid with 2 px of padding, a 2 px stroke and round joins. Shared keylines hold circles, squares and tall shapes to one optical size, so any two icons sit together like letters of one font.
- 24 x 24 grid
- 2 px padding
- 2 px stroke
- Round caps and joins
One icon. Every weight.
Every icon renders along three axes: weight from 1 to 3 with optical compensation at small sizes, round or sharp corners, and outline, duotone or solid style generated from its closed shapes.
Dial it in.
Drag the sliders. Every component in every framework takes the same props.
Anything into anything.
Paths are normalized, resampled, matched and interpolated, so any icon turns into any other. Hand tuned pairs make the everyday ones feel designed.
Icons that know how to move.
Presets that understand the icon: draw traces the strokes in order, shake swings from the top like a bell. Trigger them on mount, hover, click or a state prop. Reduced motion is always respected.
Seven states. One beat.
Every living state samples one clock, so a whole interface can move in step. Scroll to bring the tracks in. The studio exports the same frames as GIF and WebM.
Badges that cut their own gap.
Add plus, check, alert, lock, clock, sync and more in any corner. The icon underneath is trimmed around the badge, so a few hundred icons give thousands of clean combinations.
Modifier playground
Two icons. One new glyph.
Fuse 2 to 10 icons with seven layouts. Parts are scaled and snapped to the grid, and where they overlap the one behind is cut around the one in front, so lines never collide and the result still passes the lint.
New icons, already in the set.
Art drawn with the icons.
Every illustration on this page is built from the icon geometry itself: the same paths, the same grid and the same stroke.
Same props. Every stack.
Tree shakable components, a custom element that works from a single script tag, a Tailwind plugin for v3 and v4, and a CLI that builds just the icons you need.