Go
One family. Line and filled. Current color. 12, 16, 24.
Icons
Provides interface marks on a 16px viewBox. 1px currentColor strokes with butt caps and miter joins.
Preview
In action
Go
When to use
Use it for
- 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.
Not for
- Illustration or brand marks; these are 1px hairline glyphs.
- Icons as the only label; add text or an aria-label on the control.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Icon, IconCatalog, iconNames } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/icons.
2. Vendor the source
npx @noorddev/vlak-cli add icons
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/icons.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Icon, IconCatalog, iconNames } from "@noorddev/vlak-react";
<Icon name="search" size={12} />
<Icon name="search" size={16} />
<Icon name="check" size={24} variant="filled" />
<Icon name="chevron-right" rotate={90} />
<button type="button" aria-label="Close"><Icon name="close" /></button>
iconNames; // every drawn mark
<IconCatalog />Props
Icon
One mark. Size is the drawn square; the viewBox is always 16.
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | IconName | ||
size | IconSize | 16 | |
variant | IconVariant | "line" | Line hairline, or filled kinship of the same figure. |
rotate | IconRotate | Same mark, spun around 8,8. Accordion down is chevron-right at 90. |
Also accepts Omit<SVGAttributes<SVGSVGElement>, "children" | "rotate">.
IconCatalog
Full family at 12, 16, and 24, line | filled, grouped. Optical center 8,8.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string |
iconLabel (function)
Icons
Inline mark row. One family, current color.
Also accepts HTMLAttributes<HTMLDivElement>.
resolveIcon (function)
Accessibility
- Icon renders an inline <svg aria-hidden="true">; it is decorative unless you pass aria-hidden={false}, role="img", and aria-label.
- Icon-only controls need an aria-label; the icon never names them.
Markup
<div class="rs-icons"><svg class="rs-icon" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter"><path d="M5.5 3 H13 V10.5" vector-effect="non-scaling-stroke"/><rect x="3" y="5.5" width="7.5" height="7.5" vector-effect="non-scaling-stroke"/></svg><svg class="rs-icon" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter"><path d="M5.5 3 H13 V10.5" vector-effect="non-scaling-stroke"/><rect x="3" y="5.5" width="7.5" height="7.5" vector-effect="non-scaling-stroke"/></svg></div>
Classes
.rs-icons.rs-icon.rs-icon-catalog.rs-icon-group.rs-icon-group-title.rs-icon-grid.rs-icon-cell.rs-icon-pair.rs-icon-kin.rs-icon-label