Flowbite Icons - 430+ free and open-source SVG icons for Tailwind CSS and Figma
Tags: flowbite, tailwindcss, opensource, showdev
Published: 2023-06-27 09:40:09

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 SVG Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86tuvm80i0bdle4w3xgp.png)](https://flowbite.com/icons/)

[Flowbite Icons](https://flowbite.com/icons/) have been specially crafted for our [open-source UI component library](https://flowbite.com/docs/getting-started/introduction/) 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:

{% twitter https://twitter.com/zoltanszogyenyi/status/1671880818443292675 %}

## 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.

[![Flowbite Icons - Copy as feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wiaui27ycntmxx98ihax.png)](https://flowbite.com/icons/)

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.

[![Flowbite Icons Sidebar Filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9x8pjjym6w62simc63zi.png)](https://flowbite.com/icons/)

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.

[![Flowbite Icons Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi0ur0pyoqv5w8ghe500.png)](https://flowbite.com/icons/)

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:

[![Flowbite Icons Controls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u47lfamvo86euuxkld6v.png)](https://flowbite.com/icons/)

## 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](https://www.figma.com/community/file/1253280241668899805/Figma-Icons---Flowbite) for free!

[![Flowbite Icons in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uylt22e0vhlxdv1hljyd.png)](https://www.figma.com/community/file/1253280241668899805/Figma-Icons---Flowbite)

## Credits and links

You can find these icons by checking out the following resources and pages:

- [Flowbite SVG Icons](https://flowbite.com/icons/)
- [GitHub repository](https://github.com/themesberg/flowbite-icons)
- [Figma file on Community](https://www.figma.com/community/file/1253280241668899805/Figma-Icons---Flowbite)

These icons were crafted by [Evelyne Krall](https://twitter.com/EvelyneKrall), [Robert Tanislav](https://twitter.com/roberttanislav) and the interface was coded by [Zoltán Szőgyényi](https://twitter.com/zoltanszogyenyi).