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" />