Skip to Content
IntegrationsSvelteExamples with Svelte

Examples with Svelte

This page shows practical patterns for using HugeiconsIcon in common Svelte UI components.
All examples assume you’ve already installed @hugeicons/svelte and either the free or Pro icon packages.

Search bar with clear button

A search input that shows a clear button when text is entered:

<script>
  import { HugeiconsIcon } from "@hugeicons/svelte";
  import { SearchIcon, CancelCircleIcon } from "@hugeicons/core-free-icons";
 
  let searchValue = "";
</script>
 
<div>
  <input bind:value={searchValue} type="text" placeholder="Search..." />
  <button on:click={() => (searchValue.length > 0 ? (searchValue = "") : null)}>
    <HugeiconsIcon
      icon={SearchIcon}
      altIcon={CancelCircleIcon}
      showAlt={searchValue.length > 0}
      size={24}
      color="currentColor"
    />
  </button>
</div>

Favorite toggle button with Pro Icons

A favorite toggle button that switches based on the state:

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import { FavouriteStrokeStandard } from '@hugeicons-pro/core-stroke-standard'
  import { FavouriteSolidStandard } from '@hugeicons-pro/core-solid-standard'
 
  let isFavorite = false
</script>
 
<button on:click={() => (isFavorite = !isFavorite)}>
  <HugeiconsIcon
    icon={FavouriteStrokeStandard}
    altIcon={FavouriteSolidStandard}
    showAlt={isFavorite}
    size={20}
  />
</button>

Bottom navigation with active state

A navigation bar that uses different icon styles to indicate the active state:

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import {
    HomeIcon,
    SearchIcon,
    Notification03Icon,
    UserIcon
  } from '@hugeicons/core-free-icons'
  import {
    HomeIcon as HomeDuotone,
    SearchIcon as SearchDuotone,
    Notification03Icon as NotificationDuotone,
    UserIcon as UserDuotone
  } from '@hugeicons-pro/core-duotone-rounded'
 
  let activeTab = 'home'
 
  const navItems = [
    { id: 'home', solidIcon: HomeIcon, duotoneIcon: HomeDuotone },
    { id: 'search', solidIcon: SearchIcon, duotoneIcon: SearchDuotone },
    { id: 'notifications', solidIcon: Notification03Icon, duotoneIcon: NotificationDuotone },
    { id: 'profile', solidIcon: UserIcon, duotoneIcon: UserDuotone }
  ]
</script>
 
<nav>
  {#each navItems as item}
    <button
      on:click={() => (activeTab = item.id)}
      class:active={activeTab === item.id}
    >
      <HugeiconsIcon
        icon={item.solidIcon}
        altIcon={item.duotoneIcon}
        showAlt={activeTab === item.id}
        size={24}
      />
    </button>
  {/each}
</nav>

Next steps

Best Practices with SvelteOverview