simpleicons.dev

Showcase your skills on your GitHub README or resumé with ease.

Icon data from simple-icons. Use official slugs as identifiers. The npm package is a version marker for the deployed service, not a programmatic SDK.

Quick Start

Paste this into your Markdown:

My Skills

Replace the icons value with a comma-separated list of slugs from simpleicons.org.

Examples

Light theme (shown above)

![My Skills](https://simpleicons.dev/icons?icons=javascript,html5,css,react,nodedotjs&theme=light)
My Skills

Dark theme

![My Skills](https://simpleicons.dev/icons?icons=javascript,html5,css,react,nodedotjs&theme=dark)
My Skills

Two icons per row

![My Skills](https://simpleicons.dev/icons?icons=javascript,react&perline=2)
My Skills

Single icon without card background

![JavaScript](https://simpleicons.dev/icons?icons=javascript&viewbox=auto)
JavaScript

Custom background color

![My Skills](https://simpleicons.dev/icons?icons=javascript&color=F7DF1E)
My Skills

Custom icon color

![My Skills](https://simpleicons.dev/icons?icons=javascript&iconColor=FF0000)
My Skills

Showcase

Real-world usage in a GitHub profile README — skills badges rendered via Markdown image embeds.

牛油果在东京学习
GitHub README skills section using simpleicons.dev badges

API Reference

GET https://simpleicons.dev/icons returns a combined SVG for Markdown embeds.

ParameterRequiredDefaultDescription
iconsYes—Comma-separated slug list (max 100 icons). Find slugs at simpleicons.org.
themeNodarkCard background theme: "light" or "dark".
perlineNo15Icons per row in the combined grid (1–50).
viewboxNo—Set to "auto" for a raw 24×24 single icon, or a grid without card backgrounds for multiple icons.
colorNo—Custom card background hex color (e.g. F7DF1E, no # prefix).
iconColorNo—Override icon path fill color (hex, no # prefix).

Icon slugs are listed at simpleicons.org and in the official slugs reference.