Loading…
Loading sprite…
10 glyphs · static
Premiumshapes · flat · static · light
Confetti Shapes
Ten confetti pieces drawn to the same scale: rectangle, curled strip, dot, triangle, ring, star, hexagon, cross, arc and squiggle. Scatter copies with random rotation and the two colour roles for an instant celebration layer.
The grid
Each piece sits centred in a 100×100 box at roughly 40 units across, so mixed pieces scatter evenly at one `<use>` size. Fills alternate `fill` and `accent`; the arc and squiggle are strokes.
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.
