Icons
Provides interface marks on a 16px viewBox. Round currentColor strokes are 1px at 12, 1.25px at 16, and 1.5px at 24.
Preview
In action
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 compact interface 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/icon.
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" | 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. |
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="round" stroke-linejoin="round"><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.25" stroke-linecap="round" stroke-linejoin="round"><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
Use elsewhere
Used in interfaces
AI chatDashboardSocial feedFleet managementFood orderingTeam chatAgent managementWallpaper generator3D workspaceEV controlsSatellite operationsTransit appAndroidiPhone DuoDocumentationVideo playerMusic playerMicrobiology notebookGenome mapping workspaceProtein sequence workbenchRobotics workspaceCircuit board workspaceIdentity applicationPatient dashboardMusic sessionMicroscopy acquisition plannerCalendarDesktop OS