Loading…
Loading sprite…
9 glyphs · static
Premiumshapes · flat · static · light
Dots & Halftone
Nine halftone dot fields: fades left, up and diagonal, a radial spot, a ring, a wave, a corner spot, even dots and a checker. Each is a 7×7 tile with dot size set by a function, so they tile into larger fields and read as print halftone at any size.
The grid
Each field is one group of filled circles on a 10-unit lattice in a 70×70 tile; radius = 4.6 × a function of (column, row), dots under 0.25 dropped. `fill` for most fields, `accent` for the corner spot and checker. Tile by repeating the symbol.
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.
