Svelte Icons Pack
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 Library | License | Version | Count |
|---|---|---|---|
| Ant Design SVG icons | MIT | 4.4.2 | 831 |
| Bootstrap Icons | MIT | 1.11.3 | 2050 |
| BoxIcons | CC BY 4.0 License | 2.1.4 | 1634 |
| Circum Icons | MPL-2.0 license | 1.0.0 | 288 |
| Feather | MIT | 4.29.1 | 287 |
| Font Awesome | CC BY 4.0 License | 6.5.1 | 2037 |
| Github Octicons icons | MIT | 19.9.0 | 604 |
| Heroicons | MIT | 2.1.3 | 592 |
| IcoMoon Free | CC BY 4.0 License | 491 | |
| Ionicons | MIT | 7.3.0 | 1355 |
| Lucide | ISC | 0.363.0 | 1447 |
| Remix Icon | Apache License Version 2.0 | 4.2.0 | 2860 |
| Simple Icons | CC0 1.0 Universal | 11.10.0 | 3095 |
| Simple Line Icons | MIT | 2.5.5 | 189 |
| Tabler Icons | MIT | 3.1.0 | 5219 |
| Typicons | CC BY-SA 3.0 | 2.1.2 | 336 |
| VS Code Icons | CC BY 4.0 | 0.0.35 | 460 |
| Weather Icons | SIL OFL 1.1 | 2.0.12 | 219 |
| css.gg | MIT | 2.1.1 | 704 |
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>
| Key | Default | Notes |
|---|---|---|
src |
SvgIcon |
|
color |
undefined (inherit) |
|
size |
1em |
|
viewBox |
undefined |
SVG viewBox attribute used if the underlying icon set does nots specify a viewBox per SVG. |
className |
undefined |
|
title |
undefined |
Icon 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
- Icons are taken from the other projects so please check each project licences accordingly.
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.