Icon

Display SVG icons with consistent sizing and color in buttons, navigation, and content.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Icon as a consistent host for icons and their sizes. Prefer SnowUI resource icons. For an action, place the icon in Button and give the action an accessible name; do not present a decorative graphic as an action.

Prefer a resource icon. children renders only when neither src nor the resolved icon matches.
size can inherit parent size context. Use Badge as="badge" for a corner badge. Give the Button that owns an action its accessible name.
Inside Accordion, Icon as="leading" inherits the Accordion icon size when size is omitted: 16/20/24 for sm/md/lg. Other Icons do not use this special inheritance, and an explicit size takes priority.

Import

import { Icon } from '@snowui-design-system/components';

Usage

Background

Colors

Weights

Badge positions

API Reference

Property	Type	Default	Example	Description
`src`	`string`	`—`	`src="Example"`	Image URL for the icon.
`icon`	`Component<any>`	`—`	`icon={ExampleIcon}`	resource-svelte icon component rendered directly.
`stateIcon`	`StateValueMap<Component<any> \| null>`	`—`	`stateIcon={ExampleIcon}`	Resolve an icon from the nearest parent Frame currentState. When the state has no match, fall back to Idle, then icon, src, or children. Hide Icon when the state value is null.
`size`	`IconSize`	`—`	`size={value}`	Icon size. When omitted, inherits size context from the parent Frame.
`background`	`boolean`	`false`	`background`	Whether to show a background.
`weight`	`string`	`—`	`weight="Example"`	Visual weight passed through to the icon resource. When supported, use thin, light, regular, bold, fill, or duotone. Otherwise the resource or context decides; this does not create variants the resource lacks.
`as`	`\| "badge" \| "icon" \| "prev" \| "next" \| "close" \| (string & {})`	`"icon"`	`as={asOptions}`	Role as a standalone icon, logo, central icon in an image, or Viewer control icon.
`children`	`Snippet`	`—`	`<Icon>Content</Icon>`	Icon content and badge composition. Rendered only when both src and the resolved icon are absent. A resource icon and Badge as="badge" can be provided together; the host positions the badge.
`badgePosition`	`"top" \| "bottom"`	`"top"`	`badgePosition="top"`	Badge position when hosting a corner badge: top is upper right and bottom is lower right.