# Icons
Provides interface marks on a 16px viewBox. Round currentColor strokes are 1px at 12, 1.25px at 16, and 1.5px at 24.
Category: icons
Name: `icons`
Also known as: Icon, Icons, Icon set, Glyphs
Page: https://vlak.dev/components/icons/
## When to use
- Chrome marks at 12, 16, or 24: chevrons, close, search, sort, and the rest of the family.
- rotate for the down and up chevrons; variant="filled" for the solid kin.
## When not to
- Illustration or brand marks; these are compact interface glyphs.
- Icons as the only label; add text or an aria-label on the control.
## Install
**React package.** Precompiled; no compiler to configure.
```sh
npm install @noorddev/vlak-react
```
```tsx
import "@noorddev/vlak-react/css";
import { Icon, IconCatalog, iconLabel, Icons, resolveIcon } from "@noorddev/vlak-react";
```
**Vendor the source.** The StyleX leaf lands in `components/vlak/` for your compiler to own.
```sh
npx @noorddev/vlak-cli add icons
```
**shadcn registry.** Same files, through the shadcn CLI.
```sh
npx shadcn add https://vlak.dev/r/icons.json
```
**CSS only.** `rs-*` classes on plain markup, styled by `@noorddev/vlak/css`.
```html
```
## Example
```tsx
import { Icon, IconCatalog, iconNames } from "@noorddev/vlak-react";
iconNames; // every drawn mark
```
## Props
### Icon
One mark. Size is the drawn square; the viewBox is always 16.
Extends `Omit, "children" | "rotate">`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `SVGSVGElement`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` (required) | `IconName` | | |
| `size` | `IconSize` | `16` | |
| `variant` | `IconVariant` | `"line"` | Optically weighted line, or filled silhouette of the same figure. |
| `rotate` | `IconRotate` | | Same mark, spun around 8,8. Accordion down is chevron-right at 90. |
### IconCatalog
Full family at 12, 16, and 24, line | filled, grouped. Optical center 8,8.
Forwards `ref` to the `HTMLDivElement`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | | |
### Icons
Inline mark row. One family, current color.
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLDivElement`.
No props of its own.
### Functions
- `iconLabel` (function)
- `resolveIcon` (function)
## Accessibility
- Icon renders an inline