Svelte Bootstrap Icons: SVG icons as Svelte components


Bootstrap SVG icons as Svelte components with zero dependencies.

This package uses svelvg to convert source SVG files into Svelte components.

Try it in the Svelte REPL.


# Yarn
yarn add -D svelte-bootstrap-icons

npm i -D svelte-bootstrap-icons

# pnpm
pnpm i -D svelte-bootstrap-icons


See for a list of supported icons.

Base import

  import { Alarm, Bank, CloudMoon } from "svelte-bootstrap-icons";

<Alarm />
<Bank />
<CloudMoon />

Direct import (recommended)

Import the icon directly for faster compiling during development.

  import Alarm from "svelte-bootstrap-icons/lib/Alarm.svelte";

Custom size

$$restProps are forwarded to the svg element.

Use the width and height attributes to customize the icon size. The default is 16px.

<Alarm width={24} height={24} />

Custom color

Use the fill attribute to specify a custom color.

<Alarm fill="red" />




See the contributing guidelines.

Download Details:

Author: Metonym
Source Code: 
License: MIT

#svelte #bootstrap #icon 

Svelte Bootstrap Icons: SVG icons as Svelte components
1.50 GEEK