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

Installation

1# npm
2npm i carbon-icons-svelte
3
4# pnpm
5pnpm i carbon-icons-svelte
6
7# Yarn
8yarn add carbon-icons-svelte
9
10# Bun
11bun add carbon-icons-svelte

Usage

Basic

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

1<script>
2  import Add from "carbon-icons-svelte/lib/Add.svelte";
3</script>
4
5<Add />

Custom size

Use the size prop to specify the icon size.

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

The default size is 16.

1<Add size={16} />
2<Add size={20} />
3<Add size={24} />
4<Add size={32} />

Custom props

$$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.

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

Labelled

1<Add aria-label="Add" />

Labelled icon that is focusable

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

Labelled by

1<label id="add-file">Add file</label>
2
3<Add aria-labelledby="add-file" />

API

Props

All props are optional.

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

Changelog

Contributing

License

Apache 2.0