npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flowbite-icons

v1.3.0

Published

Official Flowbite Icons library

Downloads

254

Readme

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.

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

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 themesberg/flowbite-blade-icons

Usage

Icons 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 />

See more

You can see more usages and configurations on the 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

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

Community

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

Copyright and license

Flowbite Icons is free and open-source under the MIT License.

The "Flowbite name" and logos are trademarks of Bergside Inc.

Authors and credits