Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themesberg/flowbite-icons
Free and open-source collection of SVG icons built for Flowbite and Tailwind CSS
https://github.com/themesberg/flowbite-icons
figma flowbite icon icon-pack icon-set icons icons-pack iconset react svelte svg svg-icons tailwind vue
Last synced: about 2 hours ago
JSON representation
Free and open-source collection of SVG icons built for Flowbite and Tailwind CSS
- Host: GitHub
- URL: https://github.com/themesberg/flowbite-icons
- Owner: themesberg
- License: mit
- Created: 2023-06-13T10:23:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-22T07:37:00.000Z (5 months ago)
- Last Synced: 2024-09-24T07:02:35.624Z (about 10 hours ago)
- Topics: figma, flowbite, icon, icon-pack, icon-set, icons, icons-pack, iconset, react, svelte, svg, svg-icons, tailwind, vue
- Language: TypeScript
- Homepage: https://flowbite.com/icons/
- Size: 503 KB
- Stars: 184
- Watchers: 4
- Forks: 13
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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
import { AddressCardSolid } from 'flowbite-svelte-icons';
```
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)