Home

Awesome

Svelte Icons Pack

npm

Based on https://github.com/react-icons/react-icons

Demo page

https://leshak.github.io/svelte-icons-pack/

Installation

Bun

bun add svelte-icons-pack

Yarn

yarn add svelte-icons-pack

NPM

npm install svelte-icons-pack --save

Usage v3.x

<script>
  import { Icon } from 'svelte-icons-pack';
  import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai';
</script>

<Icon src={AiOutlineNodeExpand} />

Icons

Icon LibraryLicenseVersionCount
Ant Design SVG iconsMIT4.4.2831
Bootstrap IconsMIT1.11.32050
BoxIconsCC BY 4.0 License2.1.41634
Circum IconsMPL-2.0 license1.0.0288
FeatherMIT4.29.1287
Font AwesomeCC BY 4.0 License6.5.12037
Github Octicons iconsMIT19.9.0604
HeroiconsMIT2.1.3592
IcoMoon FreeCC BY 4.0 License491
IoniconsMIT7.3.01355
LucideISC0.363.01447
Remix IconApache License Version 2.04.2.02860
Simple IconsCC0 1.0 Universal11.10.03095
Simple Line IconsMIT2.5.5189
Tabler IconsMIT3.1.05219
TypiconsCC BY-SA 3.02.1.2336
VS Code IconsCC BY 4.00.0.35460
Weather IconsSIL OFL 1.12.0.12219
css.ggMIT2.1.1704

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure icons props using

<script>
  import { Icon } from 'svelte-icons-pack';
  import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai';
</script>

<Icon src={AiOutlineNodeExpand} color="red" size="64" viewBox="0 0 1024 1024" className="custom-icon" title="Custom icon params" />

<style>
  :global(.custom-icon) {
    margin: 100px;
  }
</style>
KeyDefaultNotes
srcSvgIcon
colorundefined (inherit)
size1em
viewBoxundefinedSVG viewBox attribute used if the underlying icon set does nots specify a viewBox per SVG.
classNameundefined
titleundefinedIcon description for accessibility.

Migrating from v2.x -> v3.x

Import path has changed. You need to rewrite from the old style.

<script>
  // Old import style
  import Icon from 'svelte-icons-pack/Icon.svelte';
  import AiOutlineNodeExpand from 'svelte-icons-pack/ai/AiOutlineNodeExpand';
</script>

<Icon src={AiOutlineNodeExpand} />

<script>
  // New import style
  import { Icon } from 'svelte-icons-pack';
  import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai';
</script>

<Icon src={AiOutlineNodeExpand} />

Licence

MIT