External icon libraries

Use Svelte SVG icon families to write less code

Instead of using SVG icons, using an icon library simplifies the code. You can uses Svelte-Heros-v2 and other icon sets for Flowbite-Svelte.

Svelte-Heros-v2 icons allow you to change the icon color, size, and other props.

Installation #

npm i -D svelte-heros-v2

Color and size #

If you want to change the color with Tailwind CSS, add it in the class prop. To change the icon size use the size prop or use class like, class="h-24 w-24".

Use dark: to specify the dark mode color for icons.

<script>
  import {
    AdjustmentsVertical,
    Bell,
    Briefcase,
    Ticket,
    ChartBarSquare,
    Camera,
    ChevronLeft
  } from 'svelte-heros-v2';
</script>

<AdjustmentsVertical size="30" class="text-blue-700 dark:text-red-700" />
<Bell size="30" class="text-red-700 dark:text-green-700" />
<Briefcase size="30" class="text-green-700 dark:text-indigo-700" />
<ChartBarSquare size="30" class="text-purple-700 dark:text-pink-700" />
<Ticket size="30" class="text-pink-700 dark:text-indigo-700" />
<Camera size="30" class="text-indigo-700 dark:text-gray-100" />
<ChevronLeft size="30" class="text-yellow-700 dark:text-white" />

You can change icon colors with HEX color code by using the color prop.

<AdjustmentsVertical size="30" color="#ff0000" />
<Bell color="#10ff00" />
<Briefcase size="30" color="#001dff" />

Aria label #

Use the aria-label prop to change aria-label attribute. All icons have aria-label. For example, Adjustments has aria-label="adjustments".

<AdjustmentsVertical aria-label="adjustments icon" />>

Passing down other attributes #

You can pass other attributes as well.

<AdjustmentsVertical tabindex="0" />

Import all #

Use import * as Icon from svelte-heros-v2.

<script>
  import * as Icon from 'svelte-heros-v2';
</script>

<Icon.Cog />
<Icon.Calendar />

<h1>Size</h1>

<Icon.CircleStack size="30" />
<Icon.Funnel size="40" />

<h1>CSS HEX color</h1>
<Icon.Bookmark color="#c61515" size="40" />

<h1>Tailwind CSS</h1>
<Icon.ShoppingCart class="text-blue-500" />
<Icon.Users class="text-pink-700" />

Examples #

Here are some examples using Svelte-Heros-v2.

Accordion #

<script>
  import { AccordionItem } from 'flowbite-svelte';
  import { ArrowDownCircle, ArrowUpCircle } from 'svelte-heros-v2';
</script>

<AccordionItem id="1">
  <h2 slot="header">Header 2-1</h2>
  <span slot="arrowup">
    <ArrowUpCircle />
  </span>
  <span slot="arrowdown">
    <ArrowDownCircle />
  </span>
  <div slot="body">
    <p class="mb-2 text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
    </p>
  </div>
</AccordionItem>
<AccordionItem id="2">
  <h2 slot="header">Header 2-2</h2>
  <span slot="arrowup">
    <ArrowUpCircle />
  </span>
  <span slot="arrowdown">
    <ArrowDownCircle />
  </span>
  <div slot="body">
    <p class="mb-2 text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
    </p>
  </div>
</AccordionItem>

Alert #

<script>
  import { Alert } from 'flowbite-svelte';
  import { InformationCircle } from 'svelte-heros-v2';
</script>

<Alert class="mb-2">
  <svelte:fragment slot="icon">
    <InformationCircle class="text-blue-700 flex-shrink-0 w-5 h-5 mr-3" />
  </svelte:fragment>
  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="red" class="mb-2">
  <svelte:fragment slot="icon">
    <InformationCircle class="text-red-700 flex-shrink-0 w-5 h-5 mr-3" />
  </svelte:fragment>
  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="green" class="mb-2">
  <svelte:fragment slot="icon">
    <InformationCircle class="text-green-700 flex-shrink-0 w-5 h-5 mr-3" />
  </svelte:fragment>
  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="yellow" class="mb-2">
  <svelte:fragment slot="icon">
    <InformationCircle class="text-yellow-700 flex-shrink-0 w-5 h-5 mr-3" />
  </svelte:fragment>
  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="gray" class="mb-2">
  <svelte:fragment slot="icon">
    <InformationCircle class="text-gray-500 flex-shrink-0 w-5 h-5 mr-3" />
  </svelte:fragment>
  <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
</Alert>

Breadcrumb #

<script>
  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
  import { Home, ChevronDoubleRight } from 'svelte-heros-v2';
</script>

<Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
  <BreadcrumbItem href="/" home>
    <svelte:fragment slot="icon"> <Home /> </svelte:fragment>Home</BreadcrumbItem
  >
  <BreadcrumbItem href="/">
    <svelte:fragment slot="icon">
      <ChevronDoubleRight />
    </svelte:fragment>
    Projects</BreadcrumbItem
  >
  <BreadcrumbItem>
    <svelte:fragment slot="icon">
      <ChevronDoubleRight />
    </svelte:fragment>
    Flowbite Svelte</BreadcrumbItem
  >
</Breadcrumb>

More examples #

Alternatives #

These icon sets have the same functionalities mentioned above.