Free and open-source collection of over 430+ SVG icons built for Tailwind CSS and Figma
The quickest way of you can start using these icons is by going to the Flowbite 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.
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:
<!-- Notification bell solid -->
<svg
class="w-6 h-6 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 14 20"
>
<path
d="M12.133 10.632v-1.8A5.406 5.406 0 0 0 7.979 3.57.946.946 0 0 0 8 3.464V1.1a1 1 0 0 0-2 0v2.364a.946.946 0 0 0 .021.106 5.406 5.406 0 0 0-4.154 5.262v1.8C1.867 13.018 0 13.614 0 14.807 0 15.4 0 16 .538 16h12.924C14 16 14 15.4 14 14.807c0-1.193-1.867-1.789-1.867-4.175ZM3.823 17a3.453 3.453 0 0 0 6.354 0H3.823Z"
/>
</svg>
<!-- Notification bell outline -->
<svg
class="w-6 h-6 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 21"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 3.464V1.1m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175C15 15.4 15 16 14.462 16H1.538C1 16 1 15.4 1 14.807c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 8 3.464ZM4.54 16a3.48 3.48 0 0 0 6.92 0H4.54Z"
/>
</svg>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.
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 built by Sutu Sebastian.
npm i flowbite-react-icons// outline
import { AngleDown } from "flowbite-react-icons/outline";
function Component() {
return <AngleDown />;
}// solid
import { AngleDown } from "flowbite-react-icons/solid";
function Component() {
return <AngleDown />;
}Learn more about usage by going to the Flowbite React Icons repository on GitHub.
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 built by shinokada.
npm i -D flowbite-svelte-iconsImport the icons from the freshly installed package:
<script>
import { AddressCardSolid } from 'flowbite-svelte-icons';
</script>
<AddressCardSolid />Learn more about usage by going to the Flowbite Svelte Icons repository on GitHub.
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 repository built by Dominique Thomas.
composer require themesberg/flowbite-blade-iconsIcons can be used as self-closing Blade components which will be compiled to SVG icons:
<x-fwb-o-adjustments-horizontal />For the solid version:
<x-fwb-s-adjustments-horizontal />You can see more usages and configurations on the Flowbite Blade Icons repository.
If you want to use Flowbite Icons inside your Figma project you can duplicate the following file from the community:
Check out Flowbite Blocks to get access to over 330+ website sections coded in Tailwind CSS and Flowbite:
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:
If you need help or just want to discuss about the library join the community on Github:
⌨️ Discuss about Flowbite on GitHub
For casual chatting with others using the library:
💬 Join the Flowbite Discord Server
Video tutorials and presentations using Flowbite:
🎥 Subscribe to our YouTube channel
Flowbite Icons is free and open-source under the MIT License.
The "Flowbite name" and logos are trademarks of Bergside Inc.
- designed by Evelyne Krall
- integration in Figma by Robert Tanislav
- coding the interface by Zoltán Szőgyényi
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
.svg){kind=link}
