Svelte 4 Icons - Flowbite

Use well over 500 SVG icons based on the open-source Flowbite Icons library to power your Svelte application with optimized icons provided with both outline and solid styles. This page allows usage for Svelte 4 applications.

Requirements #

- Svelte 4 or 5
- TailwindCSS
- tailwind-merge

Installation #

Install Svelte and TailwindCSS:

npm create svelte@latest my-project
cd my-project
npx svelte-add@latest tailwindcss
pnpm i
pnpm i -D flowbite-svelte-icons@v1-latest

To make sure the classes used by flowbite-svelte-icons are included by the Tailwindcss, add the following to tailwind.config.cjs.

const config = {
  content: [
       // more lines
        "./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",
    ],
    // more lines
}  

Basic Usages #

In a svelte file:

<script>
  import { AddressBookOutline } from 'flowbite-svelte-icons';
</script>

<AddressBookOutline />

A11y friendly #

Use title, desc, and ariaLabel props to make your icons accessible.

<HeartSolid
  title={{ id: 'my-title', title: 'Red heart' }}
  desc={{ id: 'my-descrip', desc: 'The shape of a red heart' }}
  ariaLabel="red heart"
  color="red"
/>

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.

<script>
  import AddressBookOutline from 'flowbite-svelte-icons/AddressBookOutline.svelte';
</script>

<AddressBookOutline />

Passing down other attributes #

Since all icons have {...$$restProps}, you can pass other attibutes as well.

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

Using svelte:component #

<script>
  import { AddressBookOutline } from 'flowbite-svelte-icons';
</script>

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

Using onMount #

<script>
  import { AddressBookOutline } from 'flowbite-svelte-icons';
  import { onMount } from 'svelte';
  const props = {
    size: '50',
    color: '#ff0000'
  };
  onMount(() => {
    const icon = new AddressBookOutline({ target: document.body, props });
  });
</script>

Import all #

Use import * as Icon from 'flowbite-svelte-icons.

<script>
  import * as Icon from 'flowbite-svelte-icons';
</script>

<Icon.AddressBookOutline />

<h1>Size</h1>
<Icon.AddressBookOutline size="30" />

<h1>Tailwind CSS</h1>
<Icon.AddressBookOutline class="text-blue-500" />

Outline Props #

- size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = ctx.size || 'md';
- role = ctx.role || 'img';
- withEvents = ctx.withEvents || false;
- title: TitleType = {};
- desc: DescType = {};
- strokeLinecap: 'round' | 'inherit' | 'butt' | 'square' | undefined =  ctx.strokeLinecap || 'round';
- strokeWidth = ctx.strokeWidth || '2';
- ariaLabel = '<icon file name>';

Solid Props #

- size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = ctx.size || 'md';
- role = ctx.role || 'img';
- color = ctx.color || 'currentColor';
- withEvents = ctx.withEvents || false;
- title: TitleType = {};
- desc: DescType = {};
- ariaLabel = '<icon file name>';

Size #

The following table provides details about the available sizes for icons:

Size  CSS classes
xs    'w-3 h-3'
sm    'w-4 h-4'
md    'w-5 h-5'
lg    'w-6 h-6'
xl    'w-8 h-8'

To change the size of an icon, use the size prop and specify the desired size. For example:

<AddressBookOutline size="md" />

If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

<AddressBookOutline class="h-24 w-24 text-blue-700 mr-4" />

Color #

You can apply Tailwind CSS color directly to the icon component or its parent tag using the class prop.

<AddressBookOutline size="md" class="text-red-700 dark:text-green-300 inline m-1"/>

<div class="text-red-700 dark:text-green-300 inline m-1">
  <AddressBookOutline size="md" />
</div>

CSS HEX Colors #

Use the color attribute to change colors with HEX color code for Filled and Outlined components.

<AddressBookOutline color="#ff0000" size="md"/> 

Dark mode #

If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

Let’s use dark for the dark mode class as an example.

<AddressBookOutline class="text-blue-700 dark:text-red-500" />

A11y #

All icons have aria-label. For example BxAbacus has aria-label="bx abacus". Use ariaLabel prop to modify the aria-label value.

<AddressBookOutline ariaLabel="address card outline" />

Use title, desc, and ariaLabel props to make your icons accessible.

<HeartSolid
  title={{ id: 'my-title', title: 'Red heart' }}
  desc={{ id: 'my-descrip', desc: 'The shape of a red heart' }}
  ariaLabel="red heart"
  color="red"
/>

withEvents #

As default all icons are unfocusable. However you can add withEvents prop to make your icons focusable.

<AddressBookOutline withEvents/>
<ArchiveSolid withEvents />

It is possible to add tabindex="0", but it is not recommended for A11y. If you want to use it add withEvents prop as well.

<AddressBookOutline tabindex="0" withEvents/>

Events #

Use withEvents prop to use the following events:

- on:click
- on:keydown
- on:keyup
- on:focus
- on:blur
- on:mouseenter
- on:mouseleave
- on:mouseover
- on:mouseout

<AddressBookOutline withEvents on:click={handleClick}/>

Passing down other attributes #

Since all icons have {...$$restProps}, you can pass other attibutes as well.

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

Custom Default Icons #

You can create a custom default icon, by using IconSolid or IconOutline:

Create a custom component #

Create a Svelte component named src/lib/MyIcon.svelte:

<script lang="ts">
  import type { ComponentType } from 'svelte';
  const config = {
    size: "xl",
    color: '#FF5733'
  };
  import { IconSolid } from 'flowbite-svelte-icons';
  export let icon: ComponentType;
</script>

<IconSolid {...config} {icon} />

This component, MyIcon.svelte, accepts an icon prop which you can use to pass in the specific icon component you want to display. The default configuration is also applied to the icon.

Implementation in a Page #

To use your custom default icon in a Svelte page, do the following:

<script>
  import MyIcon from '$lib/MyIcon.svelte';
  import { AngleLeftSolid } from 'flowbite-svelte-icons';
</script>

<MyIcon icon="{AngleLeftSolid}" />

Here, we import the MyIcon component and the AngleLeftSolid icon. By passing the AngleLeftSolid icon to the icon prop of MyIcon, you apply the default configuration to the icon.

Setting Global Icon using setContext #

You can create global icon preferences in your Svelte application using setContext. This allows you to configure icon-related properties once and share them across multiple components.

Setting preferences #

In your +layout.svelte or +page.svelte, you can define and set global icon preferences as follows:

<script>
  import { setContext } from 'svelte';

  // Define your global icon settings
  const iconCtx = {
    size: 'xl', // Icon size in pixels
  };
  setContext('iconCtx', iconCtx);
</script>

The size, and role (for solid icons) and size, role, strokeLinecap, strokeLinejoin, strokeWidth (for outline icons) properties are optional, allowing you to fine-tune the appearance and accessibility of your icons as needed.

Prop size #

If you set size, icons can be customized with different color. For example:

<script>
  import { setContext } from 'svelte';
  import { MapLocationOutline } from 'flowbite-svelte-icons';
  const iconCtx = {
    size: 'xl'
  };
  setContext('iconCtx', iconCtx);
</script>

<MapLocationOutline color="#ff4488" />

Setting more than one props #

Remember that you can set one or more properties, allowing you to tailor icon settings to your specific design and accessibility requirements.