IC-004 · D. Icons and Visual Assets

Iconify

Unified API/framework over 100+ open icon sets; each set keeps its own license.

Summary

Unified API/framework over 100+ open icon sets; each set keeps its own license.

What it is

A meta icon framework: one API over many open icon sets, with per-set licenses.

Who it’s for

Developers who want to mix icon sets or load icons on demand.

Monochrome lightCentered heroNeutral, developer-focused
Iconify: hero image
Figure 1. 'home' icon from 12 icon sets via the Iconify API (licenses labelled per set). Source: RENDERED BY US from https://api.iconify.design SVGs; each set keeps its own license - all shown are MIT/ISC/Apache-2.0 (no attribution-only CC BY sets used)

Key takeaways

  • Captured iconify.design: centered hero with a short headline, four action buttons and a sponsor block; mostly white with blue links.
  • Function over brand: the value is in the API and the browsable icon sets.
  • Color: monochrome light theme; dominant colors #FFFFFF, #BABDBF, #D7E1E6 (ESTIMATED from our capture).

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.
  • Load only the icons you use, and check each set’s license.
ESTIMATED

Palette preview

#FFFFFF~91%#BABDBF~2%#D7E1E6~1%#59A5D3~1%#19648A~1%#4D8AAD~1%

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. 'home' icon from 12 icon sets via the Iconify API (licenses labelled per set). Source: RENDERED BY US from https://api.iconify.des
Figure 1. 'home' icon from 12 icon sets via the Iconify API (licenses labelled per set). Source: RENDERED BY US from https://api.iconify.design SVGs; each set keeps its own license - all shown are MIT/ISC/Apache-2.0 (no attribution-only CC BY sets used)
Download full resolutionRendered by the research team; see caption for source and license. Entry license: MIT (framework); per-set licenses vary (MIT/Apache/CC BY/OFL)
ESTIMATED

Dominant palette from our captures

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

#FFFFFF~91% of pixels#BABDBF~2% of pixels#D7E1E6~1% of pixels#59A5D3~1% of pixels#19648A~1% of pixels#4D8AAD~1% 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: Lucide Icons, LogoLounge, Slack media kit, Vercel, Raycast, Arc, Framer, Apple, Multiavatar, unDraw, Notion onboarding flow.

Our analysis

Captured iconify.design: centered hero with a short headline, four action buttons and a sponsor block; mostly white with blue links. Function over brand: the value is in the API and the browsable icon sets.

Monochrome lightCentered heroNeutral, developer-focused

Downloads

PDF: research notes made for this library; third-party images inside follow the credits in their captions. License / terms of the source: MIT (framework); per-set licenses vary (MIT/Apache/CC BY/OFL)

DESIGN.md for AI coding agents

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

# DESIGN.md · Iconify (IC-004)

> 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 Framework · Category: D. Icons and Visual Assets
- Platforms: Web, Figma, frameworks
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Neutral, developer-focused
- License / terms: MIT (framework); per-set licenses vary (MIT/Apache/CC BY/OFL)

Unified API/framework over 100+ open icon sets; each set keeps its own license.

### Analysis (ours)
Captured iconify.design: centered hero with a short headline, four action buttons and a sponsor block; mostly white with blue links. Function over brand: the value is in the API and the browsable icon sets.

## 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` ~91%
- `#BABDBF` ~2%
- `#D7E1E6` ~1%
- `#59A5D3` ~1%
- `#19648A` ~1%
- `#4D8AAD` ~1%

## 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://iconify.design
- Library entry: https://design-library-byt.pages.dev/entry/IC-004