Skip to content

carbon-design-system/carbon-icons-svelte

carbon-icons-svelte

NPM GitHub npm downloads to date

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.

Installation

# npm
npm i carbon-icons-svelte

# pnpm
pnpm i carbon-icons-svelte

# Yarn
yarn add carbon-icons-svelte

# Bun
bun 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.

<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

License

Apache 2.0