index

title: Iconify for Svelte
replacements:
  - code: "60,000"
    value: "${counters.icons}"
  - code: "80+"
    value: "${counters.sets}+"
  - code: "@iconify/svelte@2"
    value: "${svelte.import}"
types:
  IconifyIcon: "../../types/iconify-icon.md"
functions:
  addCollection: "./add-collection.md"
  addIcon: "./add-icon.md"
  iconExists: "./icon-exists.md"
  iconLoaded: "./icon-exists.md"
  listIcons: "./list-icons.md"
  loadIcons: "./load-icons.md"
  loadIcon: "./load-icon.md"
  getIcon: "./get-icon.md"
  enableCache: "./enable-cache.md"
  disableCache: "./disable-cache.md"
  addAPIProvider: "./add-api-provider.md"
  replaceIDs: "./replace-ids.md"
  buildIcon: "./build-icon.md"
  setFetch: "./set-fetch.md"
  setCustomIconLoader: "./custom-loaders.md"
  setCustomIconsLoader: "./custom-loaders.md"

Iconify for Svelte

include: icon-components/components/intro
replacements:
  - search: React
    replace: Svelte

Please be aware that this component is not designed for server side rendering. If you are using SSR, consider switching to Iconify Icon web component.

Installation

If you are using NPM:

npm install --save-dev @iconify/svelte@2

If you are using Yarn:

yarn add --dev @iconify/svelte@2

Svelte 4

Starting with version 6.0.0 of component, it uses Svelte 5 syntax, which is not compatible with Svelte 4.

If you are using Svelte 4, you need to use version 5 of component:

npm install --save-dev @iconify/svelte@4

or use a web component.

Usage

Install [npm]@iconify/svelte@2 and import component from it (component is exported as default export):

import Icon from "@iconify/svelte";

Then in template use [var]Icon component with icon name as [prop]icon parameter:

<Icon icon="mdi-light:home" />

SvelteKit {#sveltekit}

Component is compatible with SvelteKit. Syntax is the same as with Svelte.

The component does not retrieve icon data until it is mounted. For server side rendering it means generated HTML will not include SVGs, icons will be rendered only on the client side after hydration is complete.

If you do want to render SVGs on the server side, provide icon data as a parameter instead of icon name or use a different icon component.

Properties

You can pass any custom properties to [var]Icon.

Required properties:

• [prop]icon, [type]IconifyIcon | string icon name or icon data.

include icon-components/component-optional-props

See below for more information on each optional property.

In addition to the properties mentioned above, the icon component accepts any other properties. All other properties will be passed to generated SVG element, so you can do stuff like setting the inline style, add title and so on.

Unlike React component, Svelte component does not support events.

Icon

include: icon-components/components/intro-icon

Color

include: icon-components/components/intro-color

<Icon icon="mdi:home" style="color: red" />

For various ways to set color, see how to change icon color in Iconify for Svelte.

Dimensions

include: icon-components/components/intro-size

<Icon icon="mdi:home" style="font-size: 24px;" />

For various ways to change icon dimensions, see how to change icon dimensions in Iconify for Svelte.

Transformations

include: icon-components/components/intro-transform

For more details see how to transform icon in Iconify for Svelte.

onLoad

include icon-components/components/onload

Functions {#functions}

include: icon-components/components/functions-list/header

Check available icons {#getting-icons}

include: icon-components/components/functions-list/getting-icons

Adding icons {#adding-icons}

include: icon-components/components/functions-list/adding-icons

Custom loaders {#custom-loaders}

include: icon-components/components/functions-list/custom-loaders

Helper functions {#helper}

include: icon-components/components/functions-list/helpers

API functions {#api}

include: icon-components/components/functions-list/api

Internal API functions {#internal}

include: icon-components/components/functions-list/internal