№ feathericons-com

Feathericons

Cool, clean, geometric; crisp sans-serif, vast white space, a digital blueprint.

Component Playgroundminimalism swiss monochrome brutalism developer toolslight

The page presents a vast library of open-source icons in a clean, grid-based layout. The design prioritizes clarity and functionality, using a limited color palette and ample whitespace to emphasize the visual elements. It feels like a tool rather than a showcase. · icon library, open source icons, feather icons, icon set, vector icons, design system, ui icons, minimal icons, icon collection

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#0464fc
OKLCHoklch(55.7% 0.239 261)
RoleDominant
find sites →
Hex#013383
OKLCHoklch(34.9% 0.143 260)
RoleSurface
find sites →
Hex#74acfc
OKLCHoklch(73.9% 0.131 257)
RoleInk
find sites →
Hex#7c8484
OKLCHoklch(60.7% 0.009 197)
RoleAccent
find sites →
Hex#9fadcd
OKLCHoklch(74.8% 0.049 267)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	-apple-system	32px	400	1.25	Aa Bb Cc
h2	-apple-system	20px	500	1.5	Aa Bb Cc
body	-apple-system	16px	400	1.5	Aa Bb Cc
button	-apple-system	16px	500	1	Aa Bb Cc

Spacing scale

16px

Radius scale

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0464fc;
  --color-surface: #013383;
  --color-ink: #74acfc;
  --color-accent: #7c8484;
  --color-detail: #9fadcd;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Feathericons.
Reference design system (extracted from the live site):
- Palette: #0464fc, #013383, #74acfc, #7c8484, #9fadcd
- Typefaces: -apple-system
- Macrostructure: Component Playground
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/feathericons-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

-apple-system

32px

400

1.25

Aa Bb Cc

-apple-system

20px

500

1.5

Aa Bb Cc

body

-apple-system

16px

400

1.5

Aa Bb Cc

button

-apple-system

16px

500

Aa Bb Cc

Build a landing page in the visual style of Feathericons. Reference design system (extracted from the live site): - Palette: #0464fc, #013383, #74acfc, #7c8484, #9fadcd - Typefaces: -apple-system - Macrostructure: Component Playground Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/feathericons-com