Icon

A flexible icon component that supports Phosphor icons and custom SVG paths.

Anatomy

<script>
  import { Icon } from "@saas-ui/svelte/components/icon";
  import Heart from "phosphor-svelte/lib/Heart";
</script>

<Icon as={Heart} size="lg" colour="pink" weight="fill" />

<!-- Or with custom SVG -->
<Icon viewBox="0 0 24 24" size="md">
  <path d="M12 2L15 8H9L12 2Z" fill="currentColor" />
</Icon>

Examples

Basic Accessibility

Basic icon using a Phosphor icon.

<Icon as={Heart} colour="yellow" size="lg" weight="fill" />

Colours Accessibility

Use the colour prop to change the icon colour.

<HStack gap={4} class="flex-wrap">
	{#each colours as colour}
		<VStack gap={2} class="items-center">
			<Text size="xs">{colour}</Text>
			<Icon as={Heart} {colour} weight="fill" size="lg" />
		</VStack>
	{/each}
</HStack>

Custom S V G Accessibility

Create custom icons by passing SVG paths as children.

<Icon size="xl" colour="blue" viewBox="0 0 32 32">
	<path
		fill="currentColor"
		d="M16,11.5a3,3,0,1,0-3-3A3,3,0,0,0,16,11.5Z"
	/>
	<path
		fill="currentColor"
		d="M16.868.044A8.579,8.579,0,0,0,16,0a15.99,15.99,0,0,0-.868,31.956A8.579,8.579,0,0,0,16,32,15.99,15.99,0,0,0,16.868.044ZM16,26.5a3,3,0,1,1,3-3A3,3,0,0,1,16,26.5ZM16,15A8.483,8.483,0,0,0,8.788,27.977,13.986,13.986,0,0,1,16,2a6.5,6.5,0,0,1,0,13Z"
	/>
</Icon>

Sizes Accessibility

Use the size prop to change the icon size.

<HStack gap={4} class="items-end">
	{#each sizes as size}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<Icon as={Star} colour="yellow" weight="fill" {size} />
		</VStack>
	{/each}
</HStack>

Weights Accessibility

Use the weight prop to change the icon weight (Phosphor icons). Available weights: thin, light, regular, bold, fill, duotone.

<DataList.Root>
	{#each iconWeights as weight}
		<DataList.Item>
			<DataList.ItemLabel>{weight}</DataList.ItemLabel>
			<DataList.ItemValue>
				<Icon as={Heart} colour="rose" size="xl" {weight} />
			</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

Props

Prop	Type	Default	Description
`as`	`any`	-	The icon component to render (e.g. from phosphor-svelte or custom).
`size`	`xs \| sm \| md \| lg \| xl \| 2xl`	`md`	The size of the icon.
`weight`	`thin \| light \| regular \| bold \| fill \| duotone`	`regular`	The weight/style of the icon (for Phosphor icons).
`mirrored`	`boolean`	`false`	Whether to flip the icon horizontally (for Phosphor icons).
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`currentColor`	The colour theme of the icon.
`viewBox`	`text`	`0 0 24 24`	The SVG viewBox attribute (for custom icons).
`style`	`text`	-	Inline CSS styles to apply to the icon.
`children`	`any`	-	SVG path elements for custom icons (if `as` is not provided).
`class`	`text`	-	Additional CSS classes to apply to the icon.