Icon

Render Material Symbols by name, with inherited or explicit size and color, optional fill, and accessible labels. Load the Material Symbols font through Theme or your app's font-face declaration.

Usage

check_circle

Svelte

<script>
	import { Icon } from 'bref-ui';
</script>

<Icon name="check_circle" label="Complete" />
<Icon name="favorite" filled size="large" color="secondary" />

Playground

Clear the label for a decorative icon. Omitted size and color inherit from the preview.

Live preview

favorite

Settings

Appearance

Name

Size

Color

Filled

Accessibility

Accessible label

View generated code

Svelte

<Icon name="favorite" filled={false} label={'Favorite'} />

Sizes, colors and fill

The five sizes use 16, 20, 24, 32 and 40 pixels at the default root font size. Outline and filled icons keep the same light stroke weight and align with surrounding text.

Representative size, color and fill axes stay visible without mounting every combination.

Sizes and fill

x-small: outline / filled

small: outline / filled

medium: outline / filled

large: outline / filled

x-large: outline / filled

Colors and fill

primary: outline / filled

secondary: outline / filled

foreground: outline / filled

background: outline / filled

muted: outline / filled

info: outline / filled

success: outline / filled

warning: outline / filled

error: outline / filled

Different glyphs

check_circle

favorite

star

home

settings

warning

error

save

arrow_forward

The exhaustive color × size × fill matrix is mounted only when requested.

Props

Component props
Prop	Type	Required	Default	Description
`name`	`IconName`	Yes	`—`	Material Symbols identifier.
`filled`	`boolean`	No	`false`	Use the filled glyph variant.
`label`	`string`	No	`Omitted`	Accessible name for a meaningful standalone icon.
`size`	`Size`	No	`Inherited`	x-small, small, medium, large or x-large.
`color`	`Color`	No	`Inherited`	primary, secondary, foreground, background, muted, info, success, warning or error.

Composition and assets

Icons inherit surrounding font size and color unless explicitly set. Native span attributes and events pass through, including class and style . Icon does not accept a children snippet or expose an element binding.

Load the Material Symbols font through Theme or an application font-face declaration. The documentation layout loads Theme so these examples render the actual glyphs.

Inherited size and color

Svelte

<span style="font-size: 2rem; color: var(--color-primary);"
	><Icon name="star" /> Inherited size and color</span
>
<Icon
	name="star"
	class="custom-icon"
	style="font-size: 3rem; color: var(--color-secondary);"
	title="Native span title"
/>

Accessibility

Icons without label are decorative and hidden from assistive technology. Labeled icons have role="img" and an accessible name.

Put action names on containing buttons and leave their icons decorative. Icons alone are not interactive controls.

check_circle Complete (decorative icon beside visible text)

Google Fonts Icons

Google Fonts Icons is a catalog for browsing and customizing Material Symbols. Find a symbol's identifier there, then pass it to the name prop. This component requires the Material Symbols font to be loaded by Theme or your application.

Browse Google Fonts Icons