2.1k simpleicons · dynamic color API · vercel edge CDN

---

Schema

There are two different schemas that icns.ml (and icns.cf) is designed to work with:

Linear / flat: color is optional

https://icns.{ml,cf} / slug* — color . type†

Note: slug and color must be separated by a hyphen (dash).

Nested "folders": color is required

https://icns.{ml,cf} / color / slug* . type†

Syntax and Compatibility

Parameter	Usage	Syntax	More Information
slug*	required	Alphanumeric; No hyphens, punctuation, etc.	Naming Convention ↗
color	optional	CSS colors; Hexadecimal (3/4/6/8), names, rgb, hsl, ...	Dynamic Color API
type†	advised	.svg (raster support for .png coming soon)	--

.svg is the fallback/implicit filetype (e.g. https://icns.ml/google -> https://icns.ml/google.svg)

---

Examples

Icon	Color	Nested	Linear / Flat
	default	https://icns.ml/default/svelte.svg	https://icns.ml/svelte.svg
	rgb(0,200,200)	https://icns.ml/rgb(0,200,200)/vercel.svg	https://icns.ml/vercel-rgb(0,200,200).svg
	#223344	https://icns.ml/234/twitter.svg	https://icns.ml/twitter-234.svg
	gray	https://icns.ml/gray/typescript.svg	https://icns.ml/typescript-gray.svg
	#f009	https://icns.ml/f009/mcdonalds.svg	https://icns.ml/mcdonalds-f009.svg
	orange	https://icns.ml/orange/github.svg	https://icns.ml/github-orange.svg
	#8ddddf	https://icns.ml/8ddddf/bmw.svg	https://icns.ml/bmw-8ddddf.svg
	#8cc055	https://icns.ml/8cc055/unsplash.svg	https://icns.ml/unsplash-8cc055.svg

---

Dynamic Color API

The color parameter in the accepted URL schemas (both nested and linear/flat) is interpreted using tinycolor2.

With the goal of maximum compatibility, I've attempted to make the API as forgiving as possible:

• Reversed color and slug params will usually still resolve correctly...
• Default color is the icon's brand color specified by the simple-icons package
• Parses color with tinycolor2.toHex8String(), into a valid hex8 (or #000000ff)
• CSS named colors (such as slategray or rebeccapurple) are supported
• RGB/RGBA colors are supported
• HSL/HSV colors are supported, but experimental

What is Hex8?

You may be used to seeing hexadecimal colors only in 3 or 6 digit formats. The extra digit in Hex4 and the 2 extra digits in Hex8 are an alpha channel, which allows users to control the opacity levels of the color in question.

icns.ml supports Hex 3/4/6/8, as defined in the MDN Web Docs, meaning it supports transparency!

---

Contributing

1. Clone this repository

# GitHub CLI (https://cli.github.com)
gh repo clone nberlette/icns

# ...or with standard Git
git clone https://github.com/nberlette/icns.git

2. Create a new branch

git checkout -b feat/feature-name

3. Install dependencies

pnpm install

yarn install

npm install

4. Submit a Pull Request

gh pr create --title "My new feature for icns.ml" 

---

Bugs and Feature Requests

Found a bug? Please open an issue on the repository.

---

License

MIT © Nicholas Berlette • Icons copyright SimpleIcons • deployed with Vercel