Flowbite Svelte Icons

Flowbite Svelte Icons is an open-source component library that packages 750+ SVG icons from the Flowbite icon set as reusable Svelte 4/5/Runes components for Tailwind CSS projects.

What is Flowbite Svelte Icons?

Flowbite Svelte Icons converts the free Flowbite SVG icon collection (originally from the themesberg/flowbite-icons repository) into individual Svelte components. Each icon can be imported and rendered inside a Svelte application, with sizing and coloring controlled through Tailwind utility classes. The package is published on npm as flowbite-svelte-icons and maintained by Shin Okada under the MIT license.

The library differentiates between Outline and Solid icon styles, each documented separately on the official docs site. Version 2 of the package targets Svelte 5 or later, while version 1 (installed via the v1-latest npm tag) supports both Svelte 4 and 5. Both versions require TailwindCSS.

Key Features

• 750+ SVG icons — the complete Flowbite icon collection, split into Outline and Solid variants, each available as a discrete Svelte component for on-demand import.
• Svelte 4/5 plus Runes support — v2 supports Svelte 5 and Runes; v1-latest covers Svelte 4/5, letting teams on either Svelte version use the same icons.
• TailwindCSS integration — the installation guide includes a tailwind.config.cjs snippet that references the package's file path, so icon size and color respond to Tailwind classes.
• Open-source and free — the package is MIT-licensed, on GitHub at themesberg/flowbite-svelte-icons, with an optional GitHub sponsorship for commercial use.
• Two style sets — Outline Icons and Solid Icons are documented as separate collections, giving designers a choice between line and filled visuals.
• Svelte component architecture — icons are rendered as Svelte components rather than an icon font, so unused icons aren't shipped and tree-shaking is effective.
• Original Flowbite source — the SVGs come directly from the themesberg/flowbite-icons repository, keeping the library aligned with the Flowbite design system.

Who is Flowbite Svelte Icons for?

Svelte developers who build Flowbite-based UIs and need to embed consistent icons without writing raw SVG markup. Tailwind CSS users who want to control icon size and color using the same utility classes as the rest of the design. Also, open-source contributors looking for a permissive, MIT-licensed icon library that accepts GitHub sponsorship.

What can you do with Flowbite Svelte Icons?

• Svelte app developers: import any of the 750+ outline or solid icons as a Svelte component and place it directly in your markup.
• Flowbite users: pair the icons with Flowbite's Svelte component library to maintain a uniform visual language.
• Prototyping teams: swap between outline and solid icon styles without changing the underlying SVG source, since both are included.
• Open-source maintainers: fork the GitHub repository, submit pull requests, or sponsor development of the package.

How does Flowbite Svelte Icons work?

Install the package with pnpm i -D flowbite-svelte-icons (or flowbite-svelte-icons@v1-latest for Svelte 4/5), then add the package path to the content array in tailwind.config.cjs. After configuration, import an icon component from the package and use it like any Svelte component.

Pros and cons

• Pros: free MIT license, supports two Svelte versions via distinct npm tags, integrates with Tailwind, offers both outline and solid styles.
• Cons: requires TailwindCSS, so projects without Tailwind still need it installed; v2 drops Svelte 4 support, forcing older projects to pin v1.

Pricing

Flowbite Svelte Icons is free to use under the MIT license. The maintainer accepts optional GitHub sponsorship to fund ongoing maintenance and improvement, as noted on the project's README.

Alternatives

• Svelte-Icon-Sets — a broader collection of multiple SVG icon sets for Svelte, also created by Shin Okada and listed on the same docs site.

FAQ

Is Flowbite Svelte Icons free?

Yes, the package is released under the MIT license, so it is free for personal and commercial use. The author accepts optional donations via GitHub Sponsors, but there is no paid tier or license fee.

Does Flowbite Svelte Icons work with Svelte 4?

Yes. Install the v1-latest tag, which supports both Svelte 4 and 5. Version 2 requires Svelte 5 or later, so Svelte 4 projects should pin the v1 line.

How do I add Flowbite Svelte Icons to my Tailwind config?

Add './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}' to the content array in tailwind.config.cjs. This tells Tailwind to scan the icon components for utility classes.

What is the difference between Outline and Solid icons?

Outline icons use stroked lines with open or thin shapes, while Solid icons are filled with a solid color. Both sets are available as separate Svelte component collections, so you can mix them within the same project.

Where can I find the documentation?

The official documentation is hosted at flowbite-svelte-icons.codewithshin.com and covers usage, installation, and the full icon lists for both Outline and Solid styles.