Icons

Install

pnpm add @via-ds/icons

Examples

Importing Icons

Each icon is available as a standalone module for optimal tree-shaking:

import Cloud from '@via-ds/icons/Cloud';
import Settings from '@via-ds/icons/Settings';
import Bell from '@via-ds/icons/Bell';

function MyComponent() {
  return (
    <div>
      <Cloud />
      <Settings />
      <Bell />
    </div>
  );
}

Icons are also available as named exports from the package index. Note that tree-shaking from the barrel export depends on your bundler configuration and may not eliminate all unused icons:

import { Cloud, Settings, Bell } from '@via-ds/icons';

Using the Dynamic Icon Component

Use the Icon component with the glyph prop for dynamic icon selection:

import { Icon } from '@via-ds/icons';

function MyComponent() {
  return <Icon glyph="Checkmark" />;
}

Sizes

Icons support preset sizes (small, medium, large) or custom pixel values:

import Cloud from '@via-ds/icons/Cloud';

function Sizes() {
  return (
    <>
      <Cloud size="small" /> {/* 14px */}
      <Cloud size="medium" /> {/* 16px */}
      <Cloud size="large" /> {/* 20px */}
      <Cloud size={48} /> {/* custom 48px */}
    </>
  );
}

Custom Fill Color

Override the default currentColor with a custom fill:

import Warning from '@via-ds/icons/Warning';

function ColoredIcon() {
  return <Warning fill="#FF0000" />;
}

Accessibility

Add an accessible title for screen readers:

import InfoWithCircle from '@via-ds/icons/InfoWithCircle';

function AccessibleIcon() {
  return <InfoWithCircle title="More information" />;
}

Use role="presentation" for decorative icons:

import Sparkle from '@via-ds/icons/Sparkle';

function DecorativeIcon() {
  return <Sparkle role="presentation" />;
}

Creating Custom Glyphs

Use createGlyphComponent to build a glyph for your own SVG artwork. The resulting component honors the same contract as Via's generated glyphs: size presets and numeric sizes, IconContext size inheritance, accessible labels, slot="icon", and ref forwarding:

import { createGlyphComponent } from '@via-ds/icons';

export const MyLogo = createGlyphComponent(
  'MyLogo',
  '0 0 24 24',
  <path d="M2 2h20v20H2z" fill="currentColor" />,
  { label: 'My Logo' },
);

Artwork passes through verbatim — paths keep their own fills, so multi-color logos render as designed. Give every path its own fill (currentColor or fixed); the root svg only sets an overridable fill="none" default. A non-square viewBox is preserved and letterboxed inside the square size box. Glyphs with a designed size (e.g. logos) can declare defaultSize to render at it when no size prop or context size applies, and defaultFill to set a fallback color that the fill prop still overrides.