Discover themesberg/flowbite-icons Open Source project

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 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:

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

JSX format (React)

To start using the icons inside a React or Next.js project you will need to update the attributes to use camelCase format and exchange class with className:

// Notification bell solid JSX
<svg className="w-6 h-6 text-gray-800 dark:text-white" ariaHidden="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 JSX
<svg className="w-6 h-6 text-gray-800 dark:text-white" ariaHidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 21">
    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="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 use our custom interface on Flowbite Icons to select if you want the raw SVG or JSX (React) format and these changes will be applied automatically.

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 built by shinokada.

npm i -D flowbite-svelte-icons

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

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 repository built by Dominique Thomas.

Installation

composer require ncoo-dev/blade-flowbite-icons

Updating

Please refer to the upgrade guide when updating the library.

Blade Icons

Blade Flowbite Icons uses Blade Icons under the hood. Please refer to the Blade Icons readme for additional functionality. We also recommend to enable icon caching with this library.

Configuration

Blade Flowbite Icons also offers the ability to use features from Blade Icons like default classes, default attributes, etc. If you'd like to configure these, publish the blade-flowbite-icons.php config file:

php artisan vendor:publish --tag=blade-flowbite-icons-config

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-fbi-outline.general.adjustments-horizontal/>

You can also pass classes to your icon components:

<x-fbi-outline.general.adjustments-horizontal class="w-6 h-6 text-gray-500"/>

And even use inline styles:

<x-fbi-outline.general.adjustments-horizontal style="color: #555"/>

The solid icons can be referenced like this:

<x-fbi-solid.general.adjustments-horizontal/>

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

Flowbite Blocks

Check out Flowbite Blocks to get access to over 330+ website sections coded in Tailwind CSS and Flowbite:

📦 Check out Flowbite 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