Nyte
Foundations

Icons

Central Icons at radius 2, outlined and filled, behind one Icon component

Icon draws Central Icons from two aliased packages.

AliasPackage
central-icons@central-icons-react/round-outlined-radius-2-stroke-1.5
central-icons-filled@central-icons-react/round-filled-radius-2-stroke-1.5

Installing Central Icons needs CENTRAL_LICENSE_KEY.

Usage

import { Button } from "@nyte-ai/ui/button";
import { Icon } from "@nyte-ai/ui/icon";

<Icon name="folder" />
<Button size="sm" iconOnly icon="plus" aria-label="Add" />
  • Choose a semantic Icon name. Do not import glyphs directly.
  • Give icon-only controls an aria-label.
  • Icon defaults to 16px. Button and Toggle size their icon to the control.

Stroke weight

The sets use a 1.5-unit stroke on a 24-unit grid. Override it through the data-nyte-icon attribute on each Icon frame.

[data-nyte-icon] svg [stroke]:not([stroke="none"]) {
  stroke-width: 1.875;
}