Hey Product Hunt 👋
Today I’m happy to show you a project that we’ve been working over two years here at the Flowbite community that will help not only us to further develop UI components and interfaces but also the community as we decided to open-source a collection of over 430+ solid and outline SVG icons.
These icons were specially crafted for usage with our UI library and the Tailwind CSS ecosystem - it’s very easy to work with them by simply clicking on the icons after filtering them by copy and pasting them inside your project.
Here’s a list of features:
✅ 430+ free and open-source SVG icons
✅ over 200+ solid and outline styles
✅ filter by text, style, and category
✅ configure icon size and stroke width
✅ compatible with Tailwind CSS
✅ dark mode support available
✅ Figma file available
We have already started integrating these icons inside of our UI component library and will proceed with having them included in all our templates and future products - we invite you to check them out and see if it’s a good fit for your project. It’s opens-source under the MIT License!
Here’s a list of useful links and resources:
🔍 Flowbite Icons - 430+ free and open-source icons
👩🎨 Figma Icons - Flowbite Icons in Figma Community
📚 Flowbite Library - Open-source components built with Tailwind CSS
🧱 Flowbite Blocks - Building sections for website and applications
💎 Flowbite Pro - A larger collection of the open-source version of the latter three
I hope that this set of icons will help you out with your projects as it will help us improve our own UI library with a custom set of icons - I also want to give a special shout-out to Evelyne Karl who designed these beautiful icons and to Robert Tanislav for helping us with the Figma integration and export rules.
Woah, this is a great library filled with SVG icons. This would help a lot of Solopreneurs like me for sure
I can see all the icons are light-colored which are suitable for dark mode. Are there dark themed icons as well for someone who wants to use them on a light themed product or website?
@notionmaestro Thanks for the feedback - the color of the icons can be easily changed via CSS as we use the fill="currentColor" attribute on the SVGs. Dark mode is supported via Tailwind CSS, but you can create your own mechanism via CSS.
@ricardo_luz Thanks, Ricardo! We are already working on updating the UI library and later we'll update all our related products & future releases. We're already excited of how it looks and integrates :)
While this SVG icon collection is undoubtedly extensive and versatile, a significant drawback could be the lack of customization options in terms of colors, sizes, or shapes, which may limit its applicability in more unique or specific design scenarios. Adding more customization options could elevate the tool's user experience.
@patpijanowski Thanks for the input, Patrick! You can already update the size and shape using the range controls and you can very easily update the color using any of the text-{color}-{100|900} utility classes from Tailwind CSS. These SVG icons are no less customizable than any other well established library out there.
Flowbite