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.

You can select any icons 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