Hey developers of dev.to 👋
I am one of the open-source contributors from the Flowbite community and last week we have launched a project that we've been working on for almost two years - a collection of over 430+ SVG icons built for Tailwind CSS and Figma!
Flowbite Icons have been specially crafted for our open-source UI component library for Tailwind CSS, however, it can be used with any other UI library or framework as the icons are pure SVG.
The collection includes over 200 of solid and outline icons as styles and multiple categories that you can use to include inside your next project - the good news is that we will add new icons on a monthly basis!
Here's a short video presentation on Twitter about the icons:
Getting started
You can use our custom made interface to directly copy and paste the code of the icon as raw SVG or React (JSX) code format by selecting the "copy as" option from the sidebar and clicking on any icon.
Additionally, by selecting the style (outline or solid) and the category on the left side of the page inside the sidebar you can filter through the icons based on style and categories - these filters will be stacked and you can remove them too.
Of course, you can also directly search for the icons using the input search element that is quite prominent and can be found at the top left side of the page.
We also built a way to update the size and stroke width (outline) of the icons by using our range slider controls by applying Tailwind CSS classes to the icons - you can also update the color by simply adding a color via Tailwind CSS to the icon as we use the fill="currentColor" attributes.
In this example, I have made the icons slightly larger and made them thinner using the control buttons:
Figma file
I'm happy to also let you know that we have created a Figma file for the Flowbite Icons collection that you can install inside your project and select the icons as components.
You can get the Figma Icons from Community for free!
Credits and links
You can find these icons by checking out the following resources and pages:
These icons were crafted by Evelyne Krall, Robert Tanislav and the interface was coded by Zoltán Szőgyényi.
Top comments (1)
cool