Design Library
IC-001 · D. Icons and Visual Assets

Lucide Icons

Open-source stroke icon set (Feather fork), default in shadcn/ui.

Summary

Open-source stroke icon set (Feather fork), default in shadcn/ui.

What it is

An open-source icon set with consistent grid, stroke and naming, distributed as SVG and framework packages.

Who it’s for

Designers and developers who need a coherent, license-clear icon set for UI.

Monochrome lightCentered heroClean, technical, friendly
Lucide Icons: hero image
Figure 1. 24 sample icons. Source: RENDERED BY US from SVGs in the lucide-static npm package (ISC permits reuse with notice: Copyright (c) Lucide Icons and Contributors)

Key takeaways

  • Captured lucide.dev: centered hero with a large swirl illustration, search field and feature cards below.
  • Almost entirely white and gray with a single warm-red accent.
  • The icon set itself is 24px, 2px stroke, round caps, matching the outline look.

Best practices to borrow

  • Keep chrome neutral and let content carry color.
  • Center one headline, one sentence and at most two actions; let the next section carry detail.
  • Pick one set, one size and one stroke weight per product; don’t mix sets in the same UI.
ESTIMATED

Palette preview

#FFFFFF~57%#E1E0E5~4%#CFCBCE~3%#AD888B~2%

Quick links

Source PDF notes DESIGN.md Images (.zip)

Figures

Extracted from the v2 research PDF. Only figures the research team rendered from open-licensed or official public values are shown; official page screenshots and third-party artwork are not published here (they are blanked in the downloadable PDF). Captions and credits are as written in the PDF.

Figure 1. 24 sample icons. Source: RENDERED BY US from SVGs in the lucide-static npm package (ISC permits reuse with notice: Copyright (c) L
Figure 1. 24 sample icons. Source: RENDERED BY US from SVGs in the lucide-static npm package (ISC permits reuse with notice: Copyright (c) Lucide Icons and Contributors)
Download full resolutionRendered by the research team; see caption for source and license. Entry license: ISC

Related entries

IC-002 · Icon Library

Heroicons

Monochrome lightSplit hero
IC-003 · Icon Library

Phosphor Icons

Warm neutralSplit hero
IC-004 · Icon Framework

Iconify

Monochrome lightCentered hero
AV-005 · Avatar Library

Multiavatar

Monochrome lightCentered hero
ESTIMATED

Dominant palette from our captures

Measured by us from our screenshot(s) of https://lucide.dev (median-cut quantization; share = % of pixels). Approximate and not official.

#FFFFFF~57% of pixels#E1E0E5~4% of pixels#CFCBCE~3% of pixels#AD888B~2% of pixels

Layout pattern: Centered hero

Observed by us on the captured page(s). See all entries by layout.

How to apply it: Center one headline, one sentence and at most two actions; let the next section carry detail.

Other entries with this layout: Iconify, LogoLounge, Slack media kit, Vercel, Raycast, Arc, Framer, Apple, Multiavatar, unDraw, Notion onboarding flow.

Our analysis

Captured lucide.dev: centered hero with a large swirl illustration, search field and feature cards below. Almost entirely white and gray with a single warm-red accent. The icon set itself is 24px, 2px stroke, round caps, matching the outline look.

Monochrome lightCentered heroClean, technical, friendly

Similar to this

Ranked by shared color theme, layout, category, type and mood tags.

IC-004 · Icon Framework

Iconify

Monochrome lightCentered hero
IC-002 · Icon Library

Heroicons

Monochrome lightSplit hero
AV-005 · Avatar Library

Multiavatar

Monochrome lightCentered hero
AV-008 · Illustration Library

unDraw

Monochrome lightCentered hero

Downloads

PDF notes All images (.zip) DESIGN.md

PDF: research notes made for this library; third-party images inside follow the credits in their captions. License / terms of the source: ISC

DESIGN.md for AI coding agents

Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.

Download .mdAll entries
# DESIGN.md · Lucide Icons (IC-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Icon Library · Category: D. Icons and Visual Assets
- Platforms: Web, React, Vue, Svelte, Flutter
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Clean, technical, friendly
- License / terms: ISC

Open-source stroke icon set (Feather fork), default in shadcn/ui.

### Analysis (ours)
Captured lucide.dev: centered hero with a large swirl illustration, search field and feature cards below. Almost entirely white and gray with a single warm-red accent. The icon set itself is 24px, 2px stroke, round caps, matching the outline look.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~57%
- `#E1E0E5` ~4%
- `#CFCBCE` ~3%
- `#AD888B` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://lucide.dev
- Library entry: https://design-library-byt.pages.dev/entry/IC-001