# Contour 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.

- Slug: `contour-icons`
- Category: [Icons](https://www.assembli.design/category/icons.md)
- Subcategory: [Contour](https://www.assembli.design/category/icons/contour.md) (`contour`)
- Type: component
- Tags: icons, icon-set, feather, line-icons, solid-icons, duotone, svg, animated, react
- npm dependencies: none
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/contour-icons
- Page: https://www.assembli.design/components/contour-icons

![Contour Icons preview](https://www.assembli.design/thumbnails/contour-icons-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | 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. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/contour-icons/contour-icons.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/contour-icons
```

Registry item JSON: https://www.assembli.design/r/contour-icons.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.