Getting Started - Svelte Ionicons v2

sponsor npm License npm

Requirements #

- Svelte 5 with Runes

Installation #

Install Svelte:

// install Svelte 5
npm create svelte@latest my-project
cd my-project
pnpm i

Install svelte-ionicons v2:

pnpm i -D svelte-ionicons@next

Enable Runes in svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [vitePreprocess({})],
  compilerOptions: {
    runes: true
  kit: {
    adapter: adapter()

export default config;

Basic Usage #

In a svelte file:

  import { Accessibility } from 'svelte-ionicons';

<Accessibility />

IDE support #

If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, etc.

Faster compiling #

If you need only a few icons from this library in your Svelte app, import them directly. This can optimize compilation speed and improve performance by reducing the amount of code processed during compilation.

  import Accessibility from 'svelte-ionicons/Accessibility.svelte';

<Accessibility />

Asscessible SVGs #

A11y props, title, desc, and ariaLabel are used for accessible SVG icons.

Passing down other attributes #

All icons have "...restProps" and you can pass other attibutes as well.

<Accessibility id="my-svg" transform="rotate(45)" />

Using svelte:component #

  import { Accessibility } from 'svelte-ionicons';

<svelte:component this="{Accessibility}" />

Import all #

Use import * as Icon from 'svelte-ionicons'.

  import * as Icon from 'svelte-ionicons';

<Icon.Accessibility />

<Icon.Accessibility size="30" />