Simple Icons CDN

Colorable and resizable CDN for Simple Icons

API Reference

Base URL Pattern:

GET /:icon_slug/:color?/:dark_mode_color?

Query parameters can be added to customize the icon:

GET /:icon_slug?viewbox=auto&size=24

Icons List API

Retrieve a complete list of all available icons programmatically. This is perfect for building icon pickers, search functionality, or integrating with your own applications.

Endpoint

GET /api/icons

Response Format

The API returns a JSON object with the following structure:

{
  "icons": [
    {
      "slug": "coolify",
      "title": "Coolify",
      "hex": "065f46",
      "source": "https://coolify.io"
    },
    {
      "slug": "deno",
      "title": "Deno",
      "hex": "000000",
      "source": "https://deno.land"
    }
  ],
  "count": 1234
}

Response Fields

Field	Type	Description
`slug`	string	The icon identifier used in URLs (lowercase, no spaces)
`title`	string	The human-readable icon name
`hex`	string	The default hex color code (without #)
`source`	string	The official website URL of the brand/service
`count`	number	Total number of icons in the collection

Usage Example

// Fetch the list of icons
fetch('/api/icons')
  .then(response => response.json())
  .then(data => {
    console.log(`Total icons: ${data.count}`);
    data.icons.forEach(icon => {
      console.log(`${icon.title}: /${icon.slug}`);
    });
  });

// Example: Create a simple icon picker
const createIconPicker = async () => {
  const response = await fetch('/api/icons');
  const { icons } = await response.json();
  
  const select = document.createElement('select');
  icons.forEach(icon => {
    const option = document.createElement('option');
    option.value = icon.slug;
    option.textContent = icon.title;
    select.appendChild(option);
  });
  
  return select;
};

Response Headers

Header	Value
`Content-Type`	`application/json`
`Access-Control-Allow-Origin`	`*`
`Cache-Control`	`public, max-age=86400, s-maxage=31536000`

Live API Demo

Try the API directly:

curl https://your-cdn-domain.com/api/icons | jq

Usage Examples

1. Basic Usage

Get an icon with its default color and size:

2. Custom Color

Override the default color with a custom hex color:

3. Dark Mode Support

Provide two colors: one for light mode and one for dark mode. The second color is used when dark mode is active via CSS prefers-color-scheme media query.

4. Custom Size

Set a specific size in pixels using the size parameter:

5. Icon Showcase

Display multiple icons with different customizations:

6. In a Link

Use icons as clickable links to external resources:

7. Tech Stack Section

Display your project's technology stack:

Parameters

Parameter	Type	Description	Default
`icon_slug`	string	Icon identifier from simpleicons.org	Required
`color`	string	Hex color (e.g., #ff0000) or CSS keyword	Icon's default color
`dark_mode_color`	string	Color for dark mode	Same as color
`viewbox`	string	Set to "auto" for auto-sizing	Square viewBox
`size`	number	Custom size in pixels	Original size

Icon Fonts Viewer

Browse and explore our complete icon collection through our interactive viewer page. This is perfect for finding the right icon for your project.

Features

Visual Browse - See the latest 100 icons in a beautiful grid layout
Live Search - Filter icons by name or slug in real-time
Click to Copy - Click any icon card to copy its slug to clipboard
Color Preview - See the default brand color for each icon
Statistics - View total icon count and latest additions

Access the Viewer

Visit: /fonts

Integration Example

Add a link to the icon viewer in your documentation or app:


    🎨 Browse All Icons

Use Cases

Design Phase - Browse and select icons for your design mockups
Development - Find the correct slug for icons you want to use
Documentation - Show clients available icons for their project
Asset Selection - Quickly identify and copy icon identifiers

Legal & License Information

📋 CDN Disclaimer

This CDN service is provided as-is without any warranties. By using this service, you agree to the following terms:

No Logging - We do not review, collect, or store any access logs or usage data from this CDN.
No Responsibility - This site is not responsible for how users utilize the icons obtained through this CDN. Users are solely responsible for ensuring their use complies with all applicable laws and brand guidelines.
No Endorsement - The appearance of any brand icon on this CDN does not constitute an endorsement, sponsorship, or affiliation with that brand.
Use at Your Own Risk - This CDN is provided without warranty of any kind, express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement.
Availability - We make no guarantees about service availability, uptime, or continuity. The service may be modified or discontinued at any time without notice.

🎨 Simple Icons License & Guidelines

The icons served by this CDN are provided by the Simple Icons project. We comply with the Simple Icons licensing requirements by:

Providing attribution and links to the Simple Icons project
Maintaining a fork of the original simple-icons-cdn repository
Encouraging users to verify individual icon licenses
Directing users to the official Simple Icons disclaimer

Important Icon Licensing Information:

Simple Icons is released under CC0 - however, this does NOT mean all icons within the project are also CC0. Each icon may have different licensing.
Check individual licenses - License data can be found in the icon's entry in the JSON data file or through the license link on the icon's card on the Simple Icons website.
Licenses are subject to change - Regularly check if the license of icons you use have been changed.
Trademark symbols - Icons may include registered trademark (®) or trademark (™) symbols. We follow the Simple Icons Contributing Guidelines to decide inclusion.
Your responsibility - Simple Icons cannot be held responsible for any legal activity raised by a brand. Users must seek correct permissions to use icons relevant to their project.

Brand Guidelines:

Check brand guidelines - Users are encouraged to read brand's branding guidelines and ensure usage is in accordance with them.
Guidelines subject to change - Regularly check if brand guidelines have been updated.
Find guidelines - Brand guidelines can be found in the icon's entry in the JSON data file or through the "Brand Guidelines" link on the icon's card on the Simple Icons website.

Update & Removal Requests:

Brand updates - If you represent a brand and want to update your icon or data, submit an issue to the Simple Icons GitHub repository explaining your affiliation and reasons for the update.
Brand removal - If you represent a brand and want your icon removed, contact removals at simpleicons dot org or submit an issue on GitHub with your affiliation and reasons.

Full Simple Icons Disclaimer: Read the complete legal disclaimer

Related Resources

Simple Icons Website - Browse and search for icons
Simple Icons GitHub - Icon provider repository
Simple Icons Legal Disclaimer - Complete legal information