HeroIcons

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 brand icons, use Svelte-simpleicons.

Examples

If you want to change the color with Tailwind CSS, add it to class prop.

<script>
import {
  AdjustmentsSolid,
  BellOutline,
  BriefcaseSolid,
  TicketOutline,
  ChartSquareBarSolid,
  CameraOutline,
  BellSolid,
  ChevronLeftSolid,
} from "svelte-heros";
</script>

<AdjustmentsSolid size="30" class="text-blue-700 dark:text-red-700" />
<BellOutline size="30" class="text-red-700 dark:text-green-700" />
<BriefcaseSolid  size="30" class="text-green-700 dark:text-indigo-700" />
<ChartSquareBarSolid size="30" class="text-purple-700 dark:text-pink-700" />
<TicketOutline size="30" class="text-pink-700 dark:text-indigo-700" />
<CameraOutline size="30" class="text-indigo-700 dark:text-gray-100" />
<BellSolid size="30" class="text-gray-700 dark:text-white" />
<ChevronLeftSolid
  size="30" class="text-yellow-700 dark:text-white"
/>

It is possible to change color with HEX color code by using the `color` prop.

<AdjustmentsSolid size="30"  color="#ff0000" />
<BellOutline   color="#10ff00" />
<BriefcaseSolid  size="30" color="#001dff" />

Related components

References