Foundations — Colors, Typography, Spacing & Tokens

Icon Customizer & Catalog Explorer

Showing 5972 of 5972 iconsClick any icon to preview, tune & copy code

Displaying first 180 icons matching search. Use the search bar above to instantly find any of the 5972 icons.

Custom & Native SVG Support

While @shavin/ui includes the full Lucide catalog by default, the <Icon /> primitive is completely open and accepts any custom vector graphic, inline SVG, or 3rd-party icon component (such as Radix Icons, Phosphor, FontAwesome, or custom company brandmarks).

1. Direct Custom Component Passing

Pass your custom React SVG component directly into the icon prop. It automatically inherits all size tokens, semantic colors, and accessibility attributes:

import { Icon } from "@shavin/ui";
import { MyCustomBrandmark } from "./MyCustomBrandmark";

export function Header() {
  return (
    <Icon
      icon={MyCustomBrandmark}
      size="xl"
      color="accent"
      aria-label="Company Brandmark"
    />
  );
}

2. Inline SVG Node Wrapping

You can also pass raw JSX SVG elements directly. <Icon /> wraps them cleanly with token classes and dimensional bounding:

import { Icon } from "@shavin/ui";

<Icon size="2xl" color="contrast">
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 22h20L12 2z" />
  </svg>
</Icon>

Sizes & Vector Stroke Guidelines

Size Tokensxs to 3xl Scales

Tokens map to standard 4px baseline increments: xs (12px), sm (16px), md (20px), lg (24px), xl (32px), 2xl (40px), 3xl (48px).

Numeric Sizes16px to 256px Values

You can pass exact pixel numbers like size=64 or size=256. Multiples of 16 are recommended for pixel-grid alignment.

Stroke Stepper0.5px to 3.0px Weight

Supports granular stroke widths in 0.25 stepper increments (0.5, 1.25, 2.0, 2.75, 3.0).