simple-icons / simple-icons
SVG icons for popular brands
Fund package maintenance!
Open Collective
Installs: 963
Dependents: 2
Suggesters: 0
Security: 0
Stars: 10 646
Watchers: 193
Forks: 1 418
Open Issues: 337
Language:JavaScript
- dev-develop
- 4.20.0
- 4.19.0
- 4.18.0
- 4.17.0
- 4.16.0
- 4.15.0
- 4.14.0
- 4.13.0
- 4.12.0
- 4.11.0
- 4.10.0
- 4.9.0
- 4.8.0
- 4.7.0
- 4.6.0
- 4.5.0
- 4.4.0
- 4.3.0
- 4.2.0
- 4.1.0
- 4.0.1
- 4.0.0
- 3.13.0
- 3.12.4
- 3.12.3
- 3.12.2
- 3.12.1
- 3.12.0
- 3.11.0
- 3.10.0
- 3.9.0
- 3.8.0
- 3.7.0
- 3.6.1
- 3.6.0
- 3.5.0
- 3.4.1
- 3.4.0
- 3.3.0
- 3.2.0
- 3.1.0
- 3.0.1
- 3.0.0
- 2.19.0
- 2.18.0
- v2.17.1
- 2.17.0
- 2.16.0
- 2.15.0
- 2.14.0
- 2.13.0
- 2.12.0
- 2.11.0
- 2.10.0
- v2.9.0
- v2.8.0
- v2.7.0
- v2.6.0
- v2.5.0
- v2.4.0
- v2.3.0
- v2.2.0
- v2.1.0
- 2.0.0
- v1.20.0
- 1.19.1
- 1.19.0
- v1.18.0
- v1.17.1
- v1.17.0
- dev-renovate/all
- dev-master
This package is auto-updated.
Last update: 2021-04-19 17:41:38 UTC
README
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.
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:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/[ICON SLUG].svg" /> <img height="32" width="32" src="https://unpkg.com/simple-icons@v4/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@v4/icons/simpleicons.svg" /> <img height="32" width="32" src="https://unpkg.com/simple-icons@v4/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.
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'); console.log(icon); /* { 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 data for the icon. NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon. */
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'); console.log(icon); /* { 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 data for the icon. NOTE: the license may be `undefined` if there is no 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:
<?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
Drupal
Icons are also available as a Drupal module created by Phil Wolstenholme.
Flutter
Icons are also available as a Flutter package created by @jlnrrg.
Hexo
Icons are also available as a Hexo plugin created by @nidbCN.
Home Assistant
Icons are also available as a Home Assistant plugin created by @vigonotion.
Jetpack Compose
Icons are also available as a Jetpack Compose library created by @devsrsouza.
Kirby
Icons are also available as a Kirby plugin created by @runxel.
Laravel
Icons are also available as a Laravel Package created by @adrian-ub
Python
Icons are also available as a Python package created by @xCloudzx.
React
Icons are also available as a React package created by @wootsbot.
Svelte
Icons are also available as a Svelte package created by @wootsbot.
Vue
Icons are also available as a Vue package created by @noahlitvin.
WordPress
Icons are also available as a WordPress plugin created by @tjtaylo.