carbon-icons-svelte

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

Install carbon-icons-svelte as a development dependency.

# Yarn
yarn add -D carbon-icons-svelte

# npm
npm i -D carbon-icons-svelte

# pnpm
pnpm i -D 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.

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

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

<Add size={16} />
<Add size={20} />
<Add size={24} />
<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.

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

Labelled

<Add aria-label="Add" />

Labelled icon that is focusable

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

Labelled by

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

<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

Changelog

12.7.0 - 2024-05-27

Features

• upgrade @carbon/icons to v11.41.0 (net +25 icons)