flowbite-react-icons

flowbite-react-icons is the official React component library for Flowbite Icons, delivering the full SVG icon set as importable outline and solid React components.

What is flowbite-react-icons?

flowbite-react-icons is the official React package of Flowbite Icons, maintained by the Flowbite team. It takes the Flowbite SVG icon set and exposes each icon as a React component, with separate outline and solid endpoints that mirror the SVG file names. The package runs on any React application and can be installed using npm, yarn, pnpm, or bun.

Key Features

• Outline and solid variants — Icons are split into two import endpoints, outline and solid, so you can import AngleDown from either path depending on the style you need, with one-to-one parity to the SVG file naming convention.
• FlowbiteIcons context provider — A provider component that extends FlowbiteIconProps and applies global config such as size to every icon it wraps, letting you set a default dimension once instead of per icon.
• Nested providers with inheritance — FlowbiteIcons can be nested; a child provider inherits values from its parent context and overrides them locally, enabling decoupled composition of icon groups with different sizes or colors.
• Props priority — Inline icon props take precedence over context-provided values, and width/height props take precedence over the size prop, so you can fine-tune individual icons without breaking global defaults.
• SSR-ready — All icons and the FlowbiteIcons provider are server-rendering compatible, meaning values set in the provider render identically on server and client to avoid hydration warnings in frameworks like Next.js.
• BaseIcon for custom SVG icons — A BaseIcon component is exposed so you can create custom SVG icons while still accessing the FlowbiteIcons context, inheriting global config automatically.
• Sensible defaults — BaseIcon sets xmlns to http://www.w3.org/2000/svg and viewBox to 0 0 24 24 unless you override them.

Who is it for?

• React developers who want to use Flowbite's icon set directly as typed components rather than pasting raw SVG markup into their JSX.
• Next.js application teams that need server-side rendering without hydration mismatches; the library's SSR-safe provider ensures consistent rendering on both server and client.
• Design-system maintainers who need consistent icon sizing and coloring across a codebase can centralize those values with the FlowbiteIcons context provider.

What can you do with flowbite-react-icons?

• Set a global icon size — Wrap any number of icons in a FlowbiteIcons provider with size={48} and all of them will render at 48 by 48 pixels, with inline overrides available for exceptions.
• Compose nested icon themes — Place a nested FlowbiteIcons provider with a different color or size inside an outer provider to style a subset of icons, while the rest keep the outer defaults.
• Add custom SVG icons — Use BaseIcon with your own SVG children (including attributes like strokeWidth, strokeLinecap, and strokeLinejoin) so they automatically adopt the context-based sizing and color.
• Use in server-rendered pages — Import outline or solid icons directly into server components; the provider values are applied on both server and client, preventing hydration issues.

How does flowbite-react-icons work?

Install the package with your preferred package manager, then import an icon from either the outline or solid endpoint and render it as a JSX component. For global configuration, wrap icons in a FlowbiteIcons provider, which accepts a size prop and can be nested to create scoped overrides.

FAQ

How do I install flowbite-react-icons?

Install it via your preferred package manager: npm i flowbite-react-icons, yarn add flowbite-react-icons, pnpm add flowbite-react-icons, or bun add flowbite-react-icons. It's a single dependency that works in any React project.

What is the difference between outline and solid icons?

Flowbite Icons are provided in two visual styles: outline (stroke-based) and solid (filled). In this package, they are available from separate import endpoints — flowbite-react-icons/outline and flowbite-react-icons/solid — so you choose the style at import time rather than via a prop.

How does the FlowbiteIcons provider work?

FlowbiteIcons is a context provider that extends FlowbiteIconProps and sets global defaults for wrapped icons, such as size. It supports nesting, where inner providers inherit values from outer ones, and inline props always take precedence over context values.

Can I use flowbite-react-icons with Next.js?

Yes. The package is designed to be server-ready: all icons and the FlowbiteIcons provider render the same values on the server and the client, avoiding hydration warnings in server-rendered frameworks like Next.js.

What are the default props for BaseIcon?

BaseIcon applies two defaults: xmlns is set to http://www.w3.org/2000/svg and viewBox is set to 0 0 24 24. All other props follow the FlowbiteIconProps interface, which extends React's SVGProps<SVGSVGElement> and adds an optional size prop.

Pricing

flowbite-react-icons is free and open-source, as stated in the official repository description.

Alternatives

• react-icons — a popular React icon library that bundles icons from multiple open-source sets, whereas flowbite-react-icons focuses exclusively on the Flowbite icon set.