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.
# NPM
npm i -D svelte-bootstrap-icons
# pnpm
pnpm i -D svelte-bootstrap-icons
# Bun
bun add -D svelte-bootstrap-icons
# Yarn
yarn add -D svelte-bootstrap-icons
See ICON_INDEX.md for a list of supported icons.
<script>
import { Alarm, Bank, CloudMoon } from "svelte-bootstrap-icons";
</script>
<Alarm />
<Bank />
<CloudMoon />
Import the icon directly for faster compiling during development.
<script>
import Alarm from "svelte-bootstrap-icons/lib/Alarm.svelte";
</script>
$$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} />
Use the fill
attribute to specify a custom color.
<Alarm fill="red" />
See the contributing guidelines.