Icons

Flowbite-svelte uses svelte-heros.

You can find all the icon names from the repo.

Svelte-heros icons allow you to change icon size and color by using HEX CSS code or TailwindCSS/Flowbite.

If you need more icons use any icon sets from Svelte Icon Sets.

Color and size

If you want to change the color with Tailwind CSS, add it to 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 {
  Adjustments,
  Bell,
  Briefcase,
  Ticket,
  ChartSquareBar,
  Camera,
  Bell,
  ChevronLeft,
} from "svelte-heros";
</script>

<Adjustments 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" />
<ChartSquareBar 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" />
<Bell size="30" class="text-gray-700 dark:text-white" />
<ChevronLeft
  size="30" class="text-yellow-700 dark:text-white"
/>

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

<Adjustments 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".

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

Passing down other attributes

You can pass other attibutes as well.

<Adjustments tabindex="0" />

Import all

Use import * as Icon from svelte-heros.

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

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

<h1>Size</h1>
<Icon.Database size="30" />
<Icon.Filter size="40" />

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

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

References