svicons Svelte Themes

Svicons

35 SVG Icon Packs as Svelte Components

Svicons

Popular SVG icon packs as dependency-free Svelte components

Big thanks to @jacobwgillespie and his project svg-icons for providing pre-assembled and pre-cleaned SVG icons!

Icon Explorer (very much WIP)

Usage

Install any of the icon packs in the table below with

yarn add -D @svicons/<pack-name>

For example

yarn add -D @svicons/octicons @svicons/fa-solid @svicons/material-sharp

Then in a Svelte file, import and use as

<script>
  import Alarm from '@svicons/bootstrap/alarm.svelte'
</script>

<Alarm width="3em" color="green" />

Available Icon Packs

[bootstrap] [boxicons-logos] [boxicons-regular] [boxicons-solid] [crypto]
[entypo] [entypo-social] [evaicons-outline] [evaicons-solid] [evil]
[fa-brands] [fa-regular] [fa-solid] [feather] [fluentui-system-filled]
[fluentui-system-regular] [foundation] [heroicons-outline] [heroicons-solid] [icomoon]
[ionicons-outline] [ionicons-sharp] [ionicons-solid] [material-outlined] [material-rounded]
[material-sharp] [material-twotone] [octicons] [open-iconic] [remix-editor]
[remix-fill] [remix-line] [simple-icons] [typicons] [zondicons]

To Dos

  1. Create a searchable & filterable index page listing all icon packs and all available icons. Similar to https://styled-icons.dev. (partially completed)
  2. Convert both the site and all icon packages to TypeScript. (partially completed)
  3. Automate versioning and publishing with GitHub actions to match https://github.com/svg-icons/svg-icons release cycles.
  4. Add some ava tests to ensure icons can be imported and have expected props.

Contributions towards any of these goals are much appreciated!

Credit where it's due

Thanks to all these icon packs for their permissive licensing, allowing free use!

Top categories

Loading Svelte Themes