@plusuidesign/iconiverse-svelte

A comprehensive Svelte icon library with 5,944+ icons featuring both filled and outlined variants. Built for modern Svelte applications with full TypeScript support, tree-shaking, and zero dependencies.

Features

✨ 5,944+ Icons - Comprehensive collection across 43 categories
🎨 Dual Variants - Both filled and outlined styles
📦 Tree-Shakeable - Only bundle the icons you use
🔷 TypeScript First - Full type safety and IntelliSense
⚡ Zero Dependencies - Standalone package, no external runtime deps
🎯 Framework Optimized - Built specifically for Svelte 4 & 5
🌐 SSR Compatible - Works with SvelteKit and other Svelte SSR solutions
♿ Accessible - Built-in accessibility features

Installation

npm install @plusuidesign/iconiverse-svelte
# or
pnpm add @plusuidesign/iconiverse-svelte
# or
yarn add @plusuidesign/iconiverse-svelte

Usage

Basic Usage

<script lang="ts">
  import { HeartFilled, StarOutlined, UserFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<div>
  <HeartFilled />
  <StarOutlined class="text-yellow-500" />
  <UserFilled size={32} color="#ff0000" />
</div>

With Tailwind CSS

<script lang="ts">
  import { SearchOutlined, MenuFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<header class="flex items-center gap-4 p-4">
  <MenuFilled class="w-6 h-6 text-gray-700" />
  <SearchOutlined class="w-5 h-5 text-gray-500" />
</header>

Props

All icon components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | string \| number | 24 | Icon size (width & height) | | color | string | 'currentColor' | Icon color | | strokeWidth | string \| number | 2 | Stroke width for outlined icons | | class | string | '' | CSS class names | | absoluteStrokeWidth | boolean | false | Adjusts stroke width based on icon size |

Plus all standard SVG attributes (on:click, style, aria-label, etc.)

Advanced Examples

Custom Size and Color

<HeartFilled 
  size={48} 
  color="#e74c3c" 
  class="hover:scale-110 transition-transform"
/>

With Click Handler

<script lang="ts">
  const handleClick = () => {
    console.log('Star clicked');
  };
</script>

<StarOutlined 
  size={24}
  on:click={handleClick}
  class="cursor-pointer"
/>

Accessible Icons

<SearchOutlined 
  aria-label="Search"
  role="img"
  size={20}
/>

Dynamic Icons

<script lang="ts">
  import { HeartFilled, StarFilled, UserFilled } from '@plusuidesign/iconiverse-svelte';
  
  export let iconName: 'heart' | 'star' | 'user';
  
  const iconMap = {
    heart: HeartFilled,
    star: StarFilled,
    user: UserFilled,
  };
  
  $: Icon = iconMap[iconName];
</script>

<svelte:component this={Icon} size={24} />

Reactive Props Example

<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  let liked = false;
  $: iconColor = liked ? '#e74c3c' : '#ccc';
  
  const toggleLike = () => {
    liked = !liked;
  };
</script>

<HeartFilled 
  size={32}
  color={iconColor}
  on:click={toggleLike}
  class="cursor-pointer transition-colors"
/>

Using with Stores

<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  import { writable } from 'svelte/store';
  
  const iconSize = writable(24);
  
  function increaseSize() {
    iconSize.update(n => n + 8);
  }
</script>

<button on:click={increaseSize}>
  <HeartFilled size={$iconSize} />
  Increase Size
</button>

Icon Categories

Icons are organized into 43 categories:

• Animals, Arrows, Badges, Brand, Buildings
• Charts, Communication, Computers, Currencies, Database
• Design, Development, Devices, Document, E-commerce
• Electrical, Extensions, Food, Games, Gender
• Gestures, Health, Laundry, Letters, Logic
• Map, Math, Media, Misc, Mood
• Nature, Numbers, Photography, Shapes, Sport
• Symbols, System, Text, Vehicles, Version control
• Weather, Zodiac

Icon Variants

Each icon comes in two variants:

• Filled - Solid, filled version (suffix: Filled)
• Outlined - Outlined version (suffix: Outlined)

Example:

<script lang="ts">
  import { HeartFilled, HeartOutlined } from '@plusuidesign/iconiverse-svelte';
</script>

Tree-Shaking

This package is optimized for tree-shaking. Only the icons you import will be included in your bundle:

<!-- ✅ Good - Only HeartFilled is bundled -->
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<!-- ❌ Avoid - Imports everything -->
<script lang="ts">
  import * as Icons from '@plusuidesign/iconiverse-svelte';
</script>

TypeScript

Full TypeScript support out of the box:

<script lang="ts">
  import type { IconProps } from '@plusuidesign/iconiverse-svelte';
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  interface CustomIconProps extends IconProps {
    animated?: boolean;
  }
  
  export let size: CustomIconProps['size'] = 24;
  export let color: CustomIconProps['color'] = 'currentColor';
  export let animated: CustomIconProps['animated'] = false;
</script>

<div class:animated>
  <HeartFilled {size} {color} />
</div>

SvelteKit

Works seamlessly with SvelteKit:

<!-- routes/+page.svelte -->
<script lang="ts">
  import { StarFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<div>
  <StarFilled size={32} />
</div>

Server-Side Rendering

Icons work perfectly with SSR in SvelteKit. No special configuration needed!

<!-- routes/+page.server.ts -->
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  export let data;
</script>

<HeartFilled size={24} />

Performance Tips

1. Import only what you need - Leverage tree-shaking
2. Use CSS classes - Prefer class over inline styles
3. Use reactive statements - Optimize with $: for computed values
4. Lazy load large sets - Consider dynamic imports for icon pickers

<script lang="ts">
  // Lazy loading example
  let IconComponent;
  
  async function loadIcon(name: string) {
    const module = await import('@plusuidesign/iconiverse-svelte');
    IconComponent = module[`${name}Filled`];
  }
  
  loadIcon('Heart');
</script>

{#if IconComponent}
  <svelte:component this={IconComponent} size={24} />
{/if}

Svelte 5 Support

This package supports both Svelte 4 and Svelte 5:

<!-- Svelte 5 Runes syntax -->
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  let size = $state(24);
  let color = $state('currentColor');
  
  function increaseSize() {
    size += 8;
  }
</script>

<button onclick={increaseSize}>
  <HeartFilled {size} {color} />
  Increase
</button>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Svelte 4.0+ or Svelte 5.0+

Contributing

This is part of the Iconiverse icon library project. For issues, feature requests, or contributions, please visit our GitHub repository.

License

MIT © PlusUI Design

Related Packages

• @plusuidesign/iconiverse-core - Core icon data (for building other framework integrations)
• @plusuidesign/iconiverse-react - React icon components
• @plusuidesign/iconiverse-vue - Vue icon components

Made with ❤️ by Plus UI Design