carbon-icons-svelte

Carbon Design System SVG icons as Svelte components.

This zero dependency icon library builds Carbon Design System icons as Svelte components. Although best paired with carbon-components-svelte, these icons can be consumed standalone.

Try it in the Svelte REPL.

Preview · Icon Index

# npm
npm i carbon-icons-svelte

# pnpm
pnpm i carbon-icons-svelte

# Yarn
yarn add carbon-icons-svelte

# Bun
bun add carbon-icons-svelte

Import the icon from the carbon-icons-svelte/lib folder. See the Icon Index for a list of supported icons.

<script>
  import Add from "carbon-icons-svelte/lib/Add.svelte";
</script>

<Add />

Use the size prop to specify the icon size.

Supported icon sizes include 16, 20, 24, and 32.

The default size is 16.

<Add size={16} />
<Add size={20} />
<Add size={24} />
<Add size={32} />

$$restProps are forwarded to the svg element.

You can use fill to customize the color or pass any other valid svg attribute to the component.

<Add fill="red" class="icon" />

<Add aria-label="Add" />

<Add aria-label="Add" tabindex="0" />

<label id="add-file">Add file</label>

<Add aria-labelledby="add-file" />

All props are optional.

Name	Type	Default value
size	`16 \| 20 \| 24 \| 32`	`16`
title	`string`	`undefined`