Awesome
<p align="center"> <img src="https://cdn.simpleicons.org/simpleicons/000/fff" alt="Simple Icons" width=70> <h3 align="center">Simple Icons</h3> <p align="center"> Over 3100 Free SVG icons for popular brands. See them all on one page at <a href="https://simpleicons.org">SimpleIcons.org</a>. Contributions, corrections & requests can be made on GitHub.</p> </p> <p align="center"> <a href="https://github.com/simple-icons/simple-icons/actions?query=workflow%3AVerify+branch%3Adevelop"><img src="https://img.shields.io/github/actions/workflow/status/simple-icons/simple-icons/verify.yml?branch=develop&logo=github&label=tests" alt="Build status"/></a> <a href="https://www.npmjs.com/package/simple-icons"><img src="https://img.shields.io/npm/v/simple-icons.svg?logo=npm" alt="NPM version"/></a> <a href="https://packagist.org/packages/simple-icons/simple-icons"><img src="https://img.shields.io/packagist/v/simple-icons/simple-icons?logo=packagist&logoColor=white" alt="Build status"/></a> <br/> <a href="https://simpleicons.org"><img src="https://img.shields.io/badge/dynamic/json?color=informational&label=icons&prefix=%20&logo=simpleicons&query=%24.icons.length&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsimple-icons%2Fsimple-icons%2Fdevelop%2F_data%2Fsimple-icons.json" alt="Number of icons currently in the library"/></a> <a href="https://discord.gg/vUXFa7t5xJ"><img src="https://img.shields.io/discord/1142044630909726760?logo=discord&logoColor=white&label=discord" alt="Number of users active in our Discord server" /></a> <a href="https://opencollective.com/simple-icons"><img src="https://img.shields.io/opencollective/all/simple-icons?logo=opencollective" alt="Backers and sponsors on Open Collective"/></a> </p>Usage
[!IMPORTANT]
We ask that all users read our legal disclaimer before using icons from Simple Icons.
General Usage
Icons can be downloaded as SVGs directly from our website - simply click the download button of the icon you want, and the download will start automatically.
CDN Usage
Icons can be served from a CDN such as jsDelivr or Unpkg. Simply use the simple-icons
npm package and specify a version in the URL like the following:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/[ICON SLUG].svg" />
Where [ICON SLUG]
is replaced by the slug of the icon you want to use, for example:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/simpleicons.svg" />
These examples use the latest major version. This means you won't receive any updates following the next major release. You can use @latest
instead to receive updates indefinitely. However, this will result in a 404
error if the icon is removed.
CDN with colors
We also provide a CDN service which allows you to use colors.
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]/[DARK_MODE_COLOR]" />
Where [COLOR]
is optional, and can be replaced by the hex colors or CSS keywords of the icon you want to you use. The color is defaulted to the HEX color of the icon shown in simpleicons.org website. [DARK_MODE_COLOR]
is used for dark mode. The CSS prefers-color-scheme will be used when a value is specified. For example:
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/orange/pink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/_/eee" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/eee/_" />
You can use a viewbox=auto
parameter to get a auto-sized viewbox. This is useful if you want all icons rendered with consistent size:
<img height="20" src="https://cdn.simpleicons.org/github?viewbox=auto" />
<img height="20" src="https://cdn.simpleicons.org/simpleicons?viewbox=auto" />
<img height="20" src="https://cdn.simpleicons.org/awesomelists?viewbox=auto" />
Node Usage <img src="https://cdn.simpleicons.org/nodedotjs/000/fff" alt="Node" align=left width=24>
The icons are also available through our npm package. To install, simply run:
npm install simple-icons
All icons are imported from a single file, where [ICON SLUG]
is replaced by a capitalized slug. We highly recommend using a bundler that can tree shake such as webpack to remove the unused icon code:
// Import a specific icon by its slug as:
// import { si[ICON SLUG] } from 'simple-icons'
// For example:
// use import/esm to allow tree shaking
import { siSimpleicons } from 'simple-icons';
// or with require/cjs
const { siSimpleicons } = require('simple-icons');
It will return an icon object:
console.log(siSimpleicons);
/*
{
title: 'Simple Icons',
slug: 'simpleicons',
hex: '111111',
source: 'https://simpleicons.org/',
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
path: 'M12 12v-1.5c-2.484 ...',
guidelines: 'https://simpleicons.org/styleguide',
license: {
type: '...',
url: 'https://example.com/'
}
}
NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
*/
If you need to iterate over all icons, use:
import * as icons from 'simple-icons';
TypeScript Usage <img src="https://cdn.simpleicons.org/typescript/000/fff" alt="Typescript" align=left width=19 height=19>
Type definitions are bundled with the package.
import type { SimpleIcon } from 'simple-icons';
PHP Usage <img src="https://cdn.simpleicons.org/php/000/fff" alt="Php" align=left width=24 height=24>
The icons are also available through our Packagist package. To install, simply run:
composer require simple-icons/simple-icons
The package can then be used as follows, where [ICON SLUG]
is replaced by a slug:
<?php
// Import a specific icon by its slug as:
echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');
// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');
// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
?>
Third-Party Extensions
The below are known extensions to third-party tools.
Extension | Author |
---|---|
Blender add-on <img src="https://cdn.simpleicons.org/blender/000/fff" alt="Blender" align=left width=24 height=24> | @mondeja |
Boxy SVG library <img src="https://cdn.simpleicons.org/boxysvg/000/fff" alt="Boxy SVG" align=left width=24 height=24> | @Jarek |
Drawio library <img src="https://cdn.simpleicons.org/diagramsdotnet/000/fff" alt="Drawio" align=left width=24 height=24> | @mondeja |
Figma plugin <img src="https://cdn.simpleicons.org/figma/000/fff" alt="Figma" align=left width=24 height=24> | @LitoMore |
Miro app <img src="https://cdn.simpleicons.org/miro/000/fff" alt="Miro" align=left width=24 height=24> | @LitoMore |
Raycast extension <img src="https://cdn.simpleicons.org/raycast/000/fff" alt="Raycast" align=left width=24 height=24> | @LitoMore |
Stream Deck icon pack <img src="https://cdn.simpleicons.org/elgato/000/fff" alt="Stream Deck" align=left width=24 height=24> | @mackenly |
Webflow app <img src="https://cdn.simpleicons.org/webflow/000/fff" alt="Webflow" align=left width=24 height=24> | @diegoliv |
Maintain an extension? Submit a PR to include it in the list above.
Third-Party Libraries
The below are known third-party libraries for use in your own projects. We only keep items in the list that are at least up to date with our previous major version.
Library | Author | License | Simple Icons Version |
---|---|---|---|
Astro package <img src="https://cdn.simpleicons.org/astro/000/fff" alt="Astro" align=left width=24 height=24> | @Aviortheking | ||
Blazor Nuget package <img src="https://cdn.simpleicons.org/blazor/000/fff" alt="Blazor" align=left width=24 height=24> | @TimeWarpEngineering | ||
Flutter package <img src="https://cdn.simpleicons.org/flutter/000/fff" alt="Flutter" align=left width=24 height=24> | @jlnrrg | ||
Framer component <img src="https://cdn.simpleicons.org/framer/000/fff" alt="Framer" align=left width=24 height=24> | @LitoMore | ||
Hugo module <img src="https://cdn.simpleicons.org/hugo/000/fff" alt="Hugo" align=left width=24 height=24> | @foo-dogsquared | ||
Kirby plugin <img src="https://cdn.simpleicons.org/kirby/000/fff" alt="Kirby" align=left width=24 height=24> | @runxel | ||
LaTeX package <img src="https://cdn.simpleicons.org/latex/000/fff" alt="LaTeX" align=left width=24 height=24> | @ineshbose | ||
Laravel package <img src="https://cdn.simpleicons.org/laravel/000/fff" alt="Laravel" align=left width=24 height=24> | @adrian-ub | ||
React package <img src="https://cdn.simpleicons.org/react/000/fff" alt="React" align=left width=24 height=24> | @wootsbot | ||
Ruby gem <img src="https://cdn.simpleicons.org/rubygems/000/fff" alt="Ruby" align=left width=24 height=24> | @thepew | ||
Svelte package <img src="https://cdn.simpleicons.org/svelte/000/fff" alt="Svelte" align=left width=24 height=24> | @wootsbot | ||
Vue 3 package <img src="https://cdn.simpleicons.org/vuedotjs/000/fff" alt="Vue" align=left width=24 height=24> | @wyatt-herkamp |
Maintain a library? Submit a PR to include it in the list above.
Contribute
Information describing how to contribute can be found in the file CONTRIBUTING.md