DOCSEARCHbyAlgolia
Submit Docs

Flowbite Icons

repository·main·Indexed 42 days ago

https://github.com/themesberg/flowbite-icons

A free and open-source collection of over 430+ SVG icons designed for Tailwind CSS and Figma. Version 1.5.0 provides flexible integration via raw SVG, React components (flowbite-react-icons), Svelte components (flowbite-svelte-icons), and Laravel Blade components (themesberg/flowbite-blade-icons), supporting both Solid and Outline styles.

Tokens
1.2K
Snippets
4
Records
5
Agent score
4%

What's inside Flowbite Icons

  2. Install and use Flowbite Icons in Svelte

    main

    To use Flowbite Icons in a Svelte project, install the flowbite-svelte-icons package. Icons are imported directly from the main package.

    # Install
npm i -D flowbite-svelte-icons

# Usage
<script>
  import { AddressCardSolid } from 'flowbite-svelte-icons';
</script>

<AddressCardSolid />

  3. Install and use Flowbite Icons in Laravel & Blade

    main

    Flowbite Icons can be used as Blade components in Laravel projects via the themesberg/flowbite-blade-icons package.

    Icons follow a specific naming convention for components:

    • Outline icons: Prefix with fwb-o- (e.g., <x-fwb-o-icon-name />)
    • Solid icons: Prefix with fwb-s- (e.g., <x-fwb-s-icon-name />)
    # Install
composer require themesberg/flowbite-blade-icons

# Usage (Outline)
<x-fwb-o-adjustments-horizontal />

# Usage (Solid)
<x-fwb-s-adjustments-horizontal />

  4. Install and use Flowbite Icons in React

    main

    To use Flowbite Icons in a React project, install the flowbite-react-icons package. Icons are exported from two distinct sub-paths depending on the style you want: flowbite-react-icons/outline or flowbite-react-icons/solid.

    # Install
npm i flowbite-react-icons

# Usage (Outline)
import { AngleDown } from "flowbite-react-icons/outline";

function Component() {
  return <AngleDown />;
}

# Usage (Solid)
import { AngleDown } from "flowbite-react-icons/solid";

function Component() {
  return <AngleDown />;
}

  5. Use Flowbite Icons as raw SVG

    main

    You can integrate icons into any web application by copying the raw SVG code. To customize the icons, use Tailwind CSS classes:

    • Color: Use text-{color} classes (e.g., text-gray-500 dark:text-gray-400).
    • Size: Use Tailwind width and height classes (e.g., w-6 h-6).

    Note that icons come in two styles: Solid (using fill="currentColor") and Outline (using stroke="currentColor").

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