simple-icons

Simple Icons

Over 3300 SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub.

Usage

> Important\
> We ask that all users read our legal disclaimer before using icons from Simple Icons.

$3

Icons can be downloaded as SVGs directly from simpleicons.org - simply click the download button of the icon you want, and the download will start automatically.

$3

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:

``html


`

Where [ICON SLUG] is replaced by the [slug] of the icon you want to use, for example:

`html


`

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.

`html



`

Where [COLOR] is optional, and can be replaced by the hex colors or CSS keywords of the icon you want to 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:

`html










`

You can use a viewbox=auto parameter to get an auto-sized viewbox. This is useful if you want all icons rendered with consistent size:

`html



`

$3

The icons are also available through our npm package. To install, simply run:

`shell
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:

`javascript
// 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:

`javascript
console.log(siSimpleicons);

/*
{
title: 'Simple Icons',
slug: 'simpleicons',
hex: '111111',
source: 'https://simpleicons.org/',
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:

`javascript
import * as icons from 'simple-icons';
`

#### TypeScript Usage

Type definitions are bundled with the package.

`typescript
import type {SimpleIcon} from 'simple-icons';
`

$3

The icons are also available through our Packagist package. To install, simply run:

`shell
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');

//
?>
``

$3

See simple-icons-font to learn how to use our font distribution.

Third-Party Extensions

The below are known extensions to third-party tools.

| Extension | Author |
| :-- | :-- |
|  Blender add-on | @mondeja |
|  Boxy SVG library | @Jarek |
|  Drawio library | @mondeja |
|  Figma plugin | @LitoMore |
|  Jekyll plugin | @pirafrank |
|  Kando icon theme | @Schneegans |
|  Miro app | @LitoMore |
|  Raycast extension | @LitoMore |
|  Stream Deck icon pack | @mackenly |
|  Typst package | @cscnk52 |
|  Webflow app | @diegoliv |

Maintain an extension? [Submit a PR][open-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 |
| :-- | :-- | :-: | :-: |
|  Angular package | @gridatek | !License | !Simple Icons version |
|  Astro package | @Aviortheking | !License | !Simple Icons version |
|  Blazor Nuget package | @TimeWarpEngineering | !License | !Simple Icons version |
|  Flutter package | @jlnrrg | !License | !Simple Icons version |
|  Framer component | @LitoMore | !License | !Simple Icons version |
|  Hugo module | @foo-dogsquared | !License | !Simple Icons version |
|  Java library | @silentsoft | !License | !Simple Icons version |
|  Kirby plugin | @runxel | !License | !Simple Icons version |
|  LaTeX package | @ineshbose | !License | !Simple Icons version |
|  Laravel package | @adrian-ub | !License | !Simple Icons version |
|  Python wheel | @carstencodes | !License | !Simple Icons version |
|  React package | @wootsbot | !License | !Simple Icons version |
|  Ruby gem | @thepew | !License | !Simple Icons version |
|  Rust crate | @cscnk52 | !License | !Simple Icons version |
|  Svelte package | @wootsbot | !License | !Simple Icons version |
|  Vue 3 package | @wyatt-herkamp | !License | !Simple Icons version |

Maintain a library? [Submit a PR][open-pr] to include it in the list above.

Contribute

   

Information describing how to contribute can be found in the file CONTRIBUTING.md

[slug]: https://github.com/simple-icons/simple-icons/blob/master/slugs.md
[open-pr]: https://github.com/simple-icons/simple-icons/compare

Contributors

src="https://opencollective.com/simple-icons/contributors.svg?width=890&button=false"
alt="Contributors"
/>