Need help with simple-icons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

simple-icons
10.8K Stars 1.5K Forks Creative Commons Zero v1.0 Universal 4.4K Commits 355 Opened issues

Description

SVG icons for popular brands

Services available

!
?

Need anything else?

Contributors list

Simple Icons

Simple Icons

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

Build status NPM version Build status

Usage

General Usage

Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should 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:


Where

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


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.

Node Usage

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

$ npm install simple-icons

The API can then be used as follows, where

[ICON SLUG]
is replaced by a slug:
const simpleIcons = require('simple-icons');

// Get a specific icon by its slug as: simpleIcons.get('[ICON SLUG]');

// For example: const icon = simpleIcons.get('simpleicons');

Alternatively you can import the needed icons individually, where

[ICON SLUG]
is replaced by a slug. This is useful if you are e.g. compiling your code with webpack and therefore have to be mindful of your package size:
// Import a specific icon by its slug as:
require('simple-icons/icons/[ICON SLUG]');

// For example: const icon = require('simple-icons/icons/simpleicons');

Either method will return an icon object:

console.log(icon);

/* { 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. */

Lastly, the

simpleIcons
object is also enumerable. This is useful if you want to do a computation on every icon:
const simpleIcons = require('simple-icons');

for (const title in simpleIcons) { const icon = simpleIcons.get(title); // do stuff }

TypeScript Usage

There are also TypeScript type definitions for the Node package. To use them, simply run:

$ npm install @types/simple-icons

PHP Usage

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:
// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');

// ... ?>

Third Party Extensions

| Extension | Author | | :--- | :--- | | Drupal module | Phil Wolstenholme | | Flutter package | @jlnrrg | | Hexo plugin | @nidbCN | | Home Assistant plugin | @vigonotion | | Jetpack Compose library | @devsrsouza | | Kirby plugin | @runxel | | Laravel Package | @adrian-ub | | Python package | @xCloudzx | | React package | @wootsbot | | Svelte package | @wootsbot | | Vue package | @noahlitvin | | WordPress plugin | @tjtaylo |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.