Loading…
24 glyphs · hover to draw · click to copy one
Freeicons · line · animated · light
Arrows & UI Icons
Twenty-four interface icons on one 24-pixel grid: arrows and chevrons, refresh, external link, expand and collapse, menu, close, search, plus, minus, check, more, filter, settings, home and user. One 1.75 px round stroke throughout, a second colour role on the 'action' stroke of eight glyphs, and every path carries the draw-on convention so an icon can stroke itself in on hover or on first view.
The grid
Grid 24×24 with a 2 px safe margin (nothing beyond 4–20 on either axis except the search handle and the external-link arrow, which reach 20). Stroke 1.75 px, round caps and joins, no fills. Curves are circular arcs; diagonals sit on 45°. Two colour roles: `stroke` for the body of every glyph, `accent` for the part that signals the action (the arrow head of external links, the handle of the magnifier, the tick of the check). Every path carries `pathLength="100"` and class `v-draw`, so `--v-off` 100→0 draws the whole glyph in 0.7 s whatever its real length.
How to use it
From sprite to icons in your project.
- 01Look at the grid
Every glyph of the pack, drawn to one grid in one style. Hover one to see its animation when the pack has one.
- 02Recolour it
The colour roles are CSS variables the sprite reads. Swatches and pickers set them live; the prompt carries your values.
- 03Pick your stack
A snippet with the sprite inline, or a typed icon component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt, or one glyph
The prompt ships the whole sprite verbatim with the mounting rules. Click a glyph to copy it as a standalone SVG.
- 05Download the sprite
One .svg file, every glyph a <symbol>. Inline it once, reference by id.
