Foundations

Icons

Browse Lucide and Phosphor by outline, filled, and duotone where each library supports those styles. Copy SVG or React, download a file, or open the upstream explorer. Pass any glyph into kit shells such as Featured Icon.

Icon studio

Choose a library and style, search by name, then select an icon to export. Lucide is outline only. Phosphor adds filled and duotone.

Library
Style
Stroke
Preview size
Search

Loading Lucide icons...

Icons by Lucide · MIT

Loading Lucide icons...

Usage

Install the package for the library you chose, import the icon component, and pass it as children to Featured Icon, Button, or any host that accepts an SVG node. Kit demos use Lucide; Phosphor is available when you need fill or duotone weights.

Install Lucide (npm)

npm install lucide-react

Install Phosphor (npm)

npm install @phosphor-icons/react

Credits

Glyphs remain the work of their authors. This page catalogues them for use with Default File UI; it does not rebrand or relicense the sets.