# Icons

> Complete icon sets in one install: every icon a React component with typed props, an accent color and a motion of its own that plays on hover.

## Types

Every icon has one, set as `subcategory` in meta.json. Filter with `?subcategory=` on the JSON API or `subcategory` in the MCP search tool.

- [Plume](https://www.assembli.design/category/icons/plume.md) (`plume`, 1): 287 line icons on a 24px grid with a 2px round stroke, covering the whole Feather catalogue under the same names. Each one moves the way it means: a bell swings, a trash lid lifts, a slash draws through.
- [Offset](https://www.assembli.design/category/icons/offset.md) (`offset`, 1): 287 two-ink icons, printed like a riso job: a fine key line and a flat spot of color on the part that carries the meaning, set a hair out of register. Hover and the plates pull into line while the icon moves. Same Feather names and props as Plume.
- [Argon](https://www.assembli.design/category/icons/argon.md) (`argon`, 1): 287 neon icons bent from glass tube: a soft halo, the gas color and a hot white core, with painted-out jumps and wall clips at large sizes. Hover and the tube stutters on while the icon moves. Eight gases. Same Feather names and props as Plume.
- [Keyline](https://www.assembli.design/category/icons/keyline.md) (`keyline`, 1): 287 line icons that show their working. Hover and the construction lays in over the glyph (arcs completed to circles, guides, Bézier handles, dimensions), then it redraws along it. Same Feather names and props as Plume.

## Plume

> 287 line icons on a 24px grid with a 2px round stroke, covering the whole Feather catalogue under the same names. Each one moves the way it means: a bell swings, a trash lid lifts, a slash draws through.

- [Plume Icons](https://www.assembli.design/components/plume-icons.md): 287 line icons drawn on a 24px grid with a 2px round stroke, covering the whole Feather catalogue under the same names. Every icon is a typed React component with size, stroke and accent props, and a part that moves the way it means: a bell swings, a trash lid lifts, a slash draws through. Plays on hover of the button around it, on mount, on loop or on demand.

## Offset

> 287 two-ink icons, printed like a riso job: a fine key line and a flat spot of color on the part that carries the meaning, set a hair out of register. Hover and the plates pull into line while the icon moves. Same Feather names and props as Plume.

- [Offset Icons](https://www.assembli.design/components/offset-icons.md): 287 two-ink icons covering the whole Feather catalogue. A 1.5px key line plus a flat spot of second ink on the part that carries the meaning (the bell's body, the pin's head), or a marker under arrows and ticks, printed a hair out of register like a riso job. Hover and the plates pull into line while the icon moves. Eleven inks, halftone and hatch screens.

## Argon

> 287 neon icons bent from glass tube: a soft halo, the gas color and a hot white core, with painted-out jumps and wall clips at large sizes. Hover and the tube stutters on while the icon moves. Eight gases. Same Feather names and props as Plume.

- [Argon Icons](https://www.assembli.design/components/argon-icons.md): 287 neon icons covering the whole Feather catalogue, each bent from glass tube: a soft halo, the gas color and a hot white core. From 40px up the sign maker's work shows too, the jumps between parts painted out in black and the clips that hold the tube to the wall. Hover and it stutters on while the icon moves. Eight gases, a second gas for the moving part, unlit glass and dark-until-hover modes.

## Keyline

> 287 line icons that show their working. Hover and the construction lays in over the glyph (arcs completed to circles, guides, Bézier handles, dimensions), then it redraws along it. Same Feather names and props as Plume.

- [Keyline Icons](https://www.assembli.design/components/keyline-icons.md): 287 line icons covering the whole Feather catalogue that show their working. Hover and the construction lays in over the glyph, derived from its own geometry: every arc completed to its circle, straight runs extended into guides, Bézier handles, anchor points, width, height and the biggest radius. Then the glyph redraws stroke by stroke along it. Hairlines stay one screen pixel at every size.

Back to [all components](https://www.assembli.design/components.md).