Offset Icons
Icons · Offset
Source and install need .
pnpm dlx shadcn@latest add @assembli/contour-iconsContour Icons
354 everyday interface icons with soft squircle corners, drawn once and rendered three ways: a 1.5px line, a tinted duo and a solid with its details cut out as negative space. Covers the whole Feather catalogue under the same names plus the app icons it lacks (undo, sort, wallet, kanban, panels). Typed React components with a part that moves the way it means.
Props
Other props pass through to the root element.
size
number | string
Width and height, in px or any CSS length. Default 24.
variant
ContourVariant
"line" (the default) strokes everything, "duo" tints the main shape, "solid" fills it and knocks the details out.
strokeWidth
number | string
Stroke width in grid units. Default 1.5.
absoluteStrokeWidth
boolean
Keep the stroke the same width on screen at every size.
accent
string
Color for the moving part, e.g. "var(--color-primary)". Defaults to the icon color.
tone
string
Fill color for the duo tint. Defaults to the icon color at 22% (set --contour-tone-opacity to change the strength).
animate
ContourAnimate
When the motion plays. "hover" (the default) plays it once each time the pointer enters, or focus reaches, the nearest link, button or [data-contour-trigger] around the icon (or the icon itself). "mo…
play
unknown
Change this to any new value to play the motion once, e.g. a counter you bump after a copy.
title
string
Accessible name. Without one the icon is decorative and hidden from assistive tech.
| Description | |||
|---|---|---|---|
| size | number | string | – | Width and height, in px or any CSS length. Default 24. |
| variant | ContourVariant | – | "line" (the default) strokes everything, "duo" tints the main shape, "solid" fills it and knocks the details out. |
| strokeWidth | number | string | – | Stroke width in grid units. Default 1.5. |
| absoluteStrokeWidth | boolean | – | Keep the stroke the same width on screen at every size. |
| accent | string | – | Color for the moving part, e.g. "var(--color-primary)". Defaults to the icon color. |
| tone | string | – | Fill color for the duo tint. Defaults to the icon color at 22% (set --contour-tone-opacity to change the strength). |
| animate | ContourAnimate | – | When the motion plays. "hover" (the default) plays it once each time the pointer enters, or focus reaches, the nearest link, button or [data-contour-trigger] around the icon (or the icon itself). "mo… |
| play | unknown | – | Change this to any new value to play the motion once, e.g. a counter you bump after a copy. |
| title | string | – | Accessible name. Without one the icon is decorative and hidden from assistive tech. |
