Loading…
Loading sprite…
24 glyphs · hover to draw
Premiumicons · line · animated · light
Education Icons
Twenty-four education icons on one 24-pixel grid, 1.75 px round stroke, no fills; the second colour role picks out the detail that carries the meaning in each glyph, and every path carries the draw-on convention so an icon can stroke itself in on hover or first view.
The grid
Grid 24×24 with a 2 px safe margin, stroke 1.75 px, round caps and joins, no fills; curves are circular arcs and diagonals sit on 45°. Two colour roles: `stroke` for the body, `accent` for the detail that carries the meaning. Every path has `pathLength="100"` and class `v-draw`, so `--v-off` 100→0 draws the glyph in 0.7 s.
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.
