https://github.com/themesberg/flowbite-react-icons
Flowbite React Icon library is the official collection of SVG icons, provided freely and as open-source
https://github.com/themesberg/flowbite-react-icons
flowbite icons react svg
Last synced: about 2 months ago
JSON representation
Flowbite React Icon library is the official collection of SVG icons, provided freely and as open-source
- Host: GitHub
- URL: https://github.com/themesberg/flowbite-react-icons
- Owner: themesberg
- License: mit
- Created: 2023-11-26T19:56:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-22T09:54:04.000Z (7 months ago)
- Last Synced: 2025-08-11T23:59:18.503Z (about 2 months ago)
- Topics: flowbite, icons, react, svg
- Language: TypeScript
- Homepage: https://flowbite.com/icons/
- Size: 1.12 MB
- Stars: 10
- Watchers: 6
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flowbite-react-icons
Official React package of [Flowbite Icons](https://flowbite.com/icons/).
## Installation
```bash
# npm
npm i flowbite-react-icons
# yarn
yarn add flowbite-react-icons
# pnpm
pnpm add flowbite-react-icons
# bun
bun add flowbite-react-icons
```
## Usage
The icons are separated into `outline` and `solid` endpoints to enable having a one-to-one parity with the svg file naming convention.
### Outline
```tsx
// outline
import { AngleDown } from "flowbite-react-icons/outline";
function Component() {
return ;
}
```
### Solid
```tsx
// solid
import { AngleDown } from "flowbite-react-icons/solid";
function Component() {
return ;
}
```
## Provider
`FlowbiteIcons` is the context provider that extends the `FlowbiteIconProps` interface and is used to set a global config for all icons that it wraps.
### Usage
```tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import {
AngleDown,
AngleLeft,
AngleRight,
AngleUp,
} from "flowbite-react-icons/outline";
function Component() {
return (
// all will have 48px `width` and `height`
);
}
```
### Nesting
`FlowbiteIcons` context provider can be nested and it inherits values from parent contexts, allowing easy decoupled composability.
```tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";
function Component() {
return (
{/* [width, height] = 48 */}
{/* [width, height] = 48; color = red; */}
);
}
```
### Props priority
Inline props take precedence over what is provided by the `FlowbiteIcons` context provider.
```tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";
function Component() {
return (
{/* [width, height] = 48 */}
{/* [width, height] = 16 */}
);
}
```
Note: `width` and `height` also take precedence over `size` prop.
```tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";
function Component() {
return (
{/* [width, height] = 48 */}
{/* width = 48, height = 16 */}
);
}
```
Override with inline icon props:
```tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";
function Component() {
return (
{/* [width, height] = 48 */}
{/* [width, height] = 16 */}
);
}
```
## SSR (Server-side rendering)
All icons are server-ready including `FlowbiteIcons` context provider. Values set in `FlowbiteIcons` will be both **rendered on the server and on the client** avoiding client-side hydration warning (eg: Next.js issue).
`FlowbiteIcons` is a polymorphic context allowing it to run both on server and client with the same data.
## Bring your icon
Need more custom SVG icons but don't want to lose the `FlowbiteIcons` context provider powers as well as all your global config settings?
=> `BaseIcon` component is also exposed giving access to the `FlowbiteIcons` context provider values.
Create
```tsx
// circle-user-icon.tsx
import { BaseIcon } from "flowbite-react-icons";
export function CircleUserIcon() {
return (
);
}
```
Usage
```tsx
// page.tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { CircleUserIcon } from "./circle-user-icon";
function Component() {
return (
);
}
```
## Default values
`BaseIcon` applies the following default values to props:
| name | value |
| ------- | -------------------------- |
| xmlns | http://www.w3.org/2000/svg |
| viewBox | 0 0 24 24 |
## Types
```ts
export interface FlowbiteIconProps extends SVGProps {
/**
* Sets both `width` and `height`
*
* @default 24
*/
size?: number;
}
```