Free and open-source collection of over 430+ SVG icons built for Tailwind CSS and Figma

## Getting started The quickest way of you can start using these icons is by going to the [Flowbite Icons](https://flowbite.com/icons/) page and copy-paste the icons as raw SVG or JSX (React) by selecting the "copy as" option. You can also configure the icon size and stroke width via our custom interface.

## Basic usage The default examples are provided with raw SVG code source which is a flexible and efficient way of integrating icons into your web application regardless of what tech stack you're using. Here is a solid and outline version of the same `notification-bell` icon: ```xml ``` You can copy and paste this into your project and you can set the color via `text-gray-500 dark:text-gray-400` and the size with the Tailwind CSS `w-{*}` width and `h-{*}` classes. ## React Thanks to the open-source community from React - the Flowbite Icons collection is now also available to be used in React projects by installing the official [React icons package](https://github.com/themesberg/flowbite-react-icons) built by [Sutu Sebastian](https://github.com/SutuSebastian). ```sh npm i flowbite-react-icons ``` ```tsx // outline import { AngleDown } from "flowbite-react-icons/outline"; function Component() { return ; } ``` ```tsx // solid import { AngleDown } from "flowbite-react-icons/solid"; function Component() { return ; } ``` Learn more about usage by going to the [Flowbite React Icons](https://github.com/themesberg/flowbite-react-icons) repository on GitHub. ## Svelte Thanks to the open-source community from Svelte - the Flowbite Icons collection is now also available to be used in Svelte projects by installing the official [Svelte icons package](https://github.com/themesberg/flowbite-svelte-icons) built by [shinokada](https://github.com/shinokada). ```sh npm i -D flowbite-svelte-icons ``` Import the icons from the freshly installed package: ```svelte ``` Learn more about usage by going to the [Flowbite Svelte Icons](https://github.com/themesberg/flowbite-svelte-icons) repository on GitHub. ## Laravel & Blade support Thanks to the open-source community you can now also install and use the Flowbite Icons collection inside a Laravel project as Blade components based on the [Flowbite Blade Icons](https://github.com/themesberg/flowbite-blade-icons) repository built by [Dominique Thomas](https://github.com/domthomas-dev). ### Installation ```bash composer require themesberg/flowbite-blade-icons ``` ### Usage Icons can be used as self-closing Blade components which will be compiled to SVG icons: ```blade ``` For the solid version: ```blade ``` ### See more You can see more usages and configurations on the [Flowbite Blade Icons](https://github.com/themesberg/flowbite-blade-icons) repository. ## Figma support If you want to use Flowbite Icons inside your Figma project you can duplicate the following file from the community: 🎨 [Flowbite Icons in Figma](https://www.figma.com/community/file/1253280241668899805/Flowbite-Icons) ## Flowbite Blocks Check out Flowbite Blocks to get access to over 330+ website sections coded in Tailwind CSS and Flowbite: 📦 [Check out Flowbite Blocks](https://flowbite.com/blocks/) ## Pro version If you want to support this project you can consider purchasing the pro version of Flowbite which includes hundreds of advanced UI components, sections, pages, and a Figma design system: 💎 [Check out Flowbite Pro](https://flowbite.com/pro/) ## Community If you need help or just want to discuss about the library join the community on Github: ⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions) For casual chatting with others using the library: 💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy) Video tutorials and presentations using Flowbite: 🎥 [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A) ## Copyright and license Flowbite Icons is free and open-source under the MIT License. - 📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/) The "Flowbite name" and logos are trademarks of Bergside Inc. - 📀 [Brand guideline and trademark usage agreement](https://flowbite.com/brand/) ## Authors and credits - designed by [Evelyne Krall](https://twitter.com/EvelyneKrall) - integration in Figma by [Robert Tanislav](https://twitter.com/roberttanislav) - coding the interface by [Zoltán Szőgyényi](https://twitter.com/zoltanszogyenyi)