Simple Icons

SVG icons for popular brands

Icon set
simple-icons/simple-iconssimpleicons.orgsimple-icons

README

Simple IconsSimple Icons

Simple Icons

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

Build statusNPM versionBuild status

Number of icons currently in the libraryBackers and sponsors on Open Collective


Usage


:information_source: 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 thesimple-icons npm package and specify a version in the URL like the following:

  1. ``` html
  2. <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v7/icons/[ICON SLUG].svg" />
  3. <img height="32" width="32" src="https://unpkg.com/simple-icons@v7/icons/[ICON SLUG].svg" />
  4. ```

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

  1. ``` html
  2. <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v7/icons/simpleicons.svg" />
  3. <img height="32" width="32" src="https://unpkg.com/simple-icons@v7/icons/simpleicons.svg" />
  4. ```

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.

  1. ``` html
  2. <img height="32" width="32" src="https://cdn.simpleicons.org/[ICON_SLUG]" />
  3. <img height="32" width="32" src="https://cdn.simpleicons.org/[ICON_SLUG]/[COLOR]" />
  4. ```

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. For example:

  1. ``` html
  2. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" />
  3. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" />
  4. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" />
  5. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" />
  6. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" />
  7. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" />
  8. <img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" />
  9. ```

### Node Usage NodeNode

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

  1. ``` sh
  2. npm install simple-icons
  3. ```

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:
  1. ``` js
  2. // Import a specific icon by its slug as:
  3. // import { si[ICON SLUG] } from 'simple-icons/icons'

  5. // For example:
  6. // use import/esm to allow tree shaking
  7. import { siSimpleicons } from 'simple-icons/icons';
  8. // or with require/cjs
  9. const { siSimpleicons } = require('simple-icons/icons');
  10. ```

It will return an icon object:

  1. ``` js
  2. console.log(siSimpleicons);

  4. /*
  5. {
  6.     title: 'Simple Icons',
  7.     slug: 'simpleicons',
  8.     hex: '111111',
  9.     source: 'https://simpleicons.org/',
  10.     svg: '...',
  11.     path: 'M12 12v-1.5c-2.484 ...',
  12.     guidelines: 'https://simpleicons.org/styleguide',
  13.     license: {
  14.         type: '...',
  15.         url: 'https://example.com/'
  16.     }
  17. }

  19. NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
  20. NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
  21. */
  22. ```

#### TypeScript Usage TypescriptTypescript

Type definitions are bundled with the package.

### PHP Usage PhpPhp

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

  1. ``` sh
  2. composer require simple-icons/simple-icons
  3. ```

The package can then be used as follows, where [ICON SLUG] is replaced by a [slug]:

  1. ```php
  2. <?php
  3. // Import a specific icon by its slug as:
  4. echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');

  6. // For example:
  7. echo file_get_contents('path/to/package/icons/simpleicons.svg');

  9. // ...
  10. ?>
  11. ```

Third-Party Extensions


| Extension | Author |
| :-- | :-- |
| AngularAngular [Angular Module](https://github.com/avmaisak/ngx-simple-icons) | [@avmaisak](https://github.com/avmaisak) || BlazorBlazor [Blazor Nuget](https://github.com/TimeWarpEngineering/timewarp-simple-icons) | [@TimeWarpEngineering](https://github.com/TimeWarpEngineering) || BlenderBlender [Blender add-on](https://github.com/mondeja/simple-icons-blender) | [@mondeja](https://github.com/mondeja) || DrawioDrawio [Drawio library](https://github.com/mondeja/simple-icons-drawio) | [@mondeja](https://github.com/mondeja) || DrupalDrupal [Drupal module](https://www.drupal.org/project/simple_icons) | [Phil Wolstenholme](https://www.drupal.org/u/phil-wolstenholme) || FigmaFigma [Figma plugin](https://www.figma.com/community/plugin/1149614463603005908/Simple-Icons) | [@LitoMore](https://github.com/LitoMore) || FlutterFlutter [Flutter package](https://pub.dev/packages/simple_icons) | [@jlnrrg](https://jlnrrg.github.io/) || HexoHexo [Hexo plugin](https://github.com/nidbCN/hexo-simpleIcons) | [@nidbCN](https://github.com/nidbCN/) || Home AssistantHome Assistant [Home Assistant plugin](https://github.com/vigonotion/hass-simpleicons) | [@vigonotion](https://github.com/vigonotion/) || HugoHugo [Hugo module](https://github.com/foo-dogsquared/hugo-mod-simple-icons) | [@foo-dogsquared](https://github.com/foo-dogsquared) || OpenJDKOpenJDK [Java library](https://github.com/silentsoft/simpleicons4j) | [@silentsoft](https://github.com/silentsoft) || Jetpack ComposeJetpack Compose [Jetpack Compose library](https://github.com/DevSrSouza/compose-icons) | [@devsrsouza](https://github.com/devsrsouza/) || KirbyKirby [Kirby plugin](https://github.com/runxel/kirby3-simpleicons) | [@runxel](https://github.com/runxel) || LaTeXLaTeX [LaTeX package](https://github.com/ineshbose/simple-icons-latex) | [@ineshbose](https://github.com/ineshbose) || LaravelLaravel [Laravel Package](https://github.com/ublabs/blade-simple-icons) | [@adrian-ub](https://github.com/adrian-ub) || PythonPython [Python package](https://github.com/sachinraja/simple-icons-py) | [@sachinraja](https://github.com/sachinraja) || ReactReact [React package](https://github.com/icons-pack/react-simple-icons) | [@wootsbot](https://github.com/wootsbot) || Simple IconsSimple Icons [Stream Deck icon pack](https://github.com/mackenly/simple-icons-stream-deck) | [@mackenly](https://github.com/mackenly) || SvelteSvelte [Svelte package](https://github.com/icons-pack/svelte-simple-icons) | [@wootsbot](https://github.com/wootsbot) || VueVue [Vue 3 package](https://github.com/wyatt-herkamp/vue3-simple-icons) | [@wyatt-herkamp](https://github.com/wyatt-herkamp) || VueVue [Vue package](https://github.com/mainvest/vue-simple-icons) | [@noahlitvin](https://github.com/noahlitvin) || WordpressWordpress [WordPress plugin](https://wordpress.org/plugins/simple-icons/) | [@tjtaylo](https://github.com/tjtaylo) |

Contribute

Good first issues open

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