Svelte

@dev.icons/svelte ships native Svelte 5 components. SvelteKit, Vite, and Astro integrations all work without extra config.

Install

npm install @dev.icons/svelte

Usage

<script lang="ts">
  import { _Svelte as SvelteLogo, SvelteIcon } from "@dev.icons/svelte";
</script>

<SvelteLogo size={48} />
<SvelteIcon size={48} alt="Svelte" />

Monochrome variants

Import from the /mono subpath:

<script lang="ts">
  import { SvelteIcon } from "@dev.icons/svelte/mono";
</script>

<SvelteIcon size={48} />

Monochrome icons use currentColor, so they inherit the parent’s text color.

Props

Prop	Type	Default	Description
size	string | number	"1em"	Sets both width and height
color	string	"currentColor"	Sets the root fill. Visible on monochrome icons.
alt	string	none	Accessible name, rendered as an SVG <title>
mirrored	boolean	false	Flips the icon horizontally (scale(-1, 1))

Other attributes (class, style, aria-*) are spread onto the root <svg>.

SvelteKit

No special config needed. Import inside any +page.svelte, +layout.svelte, or component file.

<script lang="ts">
  import { GithubIcon } from "@dev.icons/svelte/mono";
</script>

<a href="https://github.com" aria-label="GitHub">
  <GithubIcon size={24} />
</a>