simple-icons / simple-icons
SVG icons for popular brands
Installs: 715
Dependents: 2
Suggesters: 0
Security: 0
Stars: 10 341
Watchers: 197
Forks: 1 369
Open Issues: 269
Language:JavaScript
- dev-develop
- 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-meta-5018/contributing-guidelines-for-beginners
- dev-renovate/all
- dev-master
- dev-tmp
This package is auto-updated.
Last update: 2021-02-25 20:15:08 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. Started by Dan Leech.
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 NAME].svg" /> <img height="32" width="32" src="https://unpkg.com/simple-icons@v4/icons/[ICON NAME].svg" />
Where [ICON NAME]
is replaced by the icon name, 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:
const simpleIcons = require('simple-icons'); // Get a specific icon by its name as: simpleIcons.get('[ICON NAME]'); // 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 ...' } */
Alternatively you can import the needed icons individually. 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 name as: require('simple-icons/icons/[ICON NAME]'); // 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 ...' } */
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:
<?php echo file_get_contents('path/to/package/icons/simple-icons.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.
Home Assistant
Icons are also available as a Home Assistant plugin created by @vigonotion.
Kirby
Icons are also available as a Kirby plugin created by @runxel.
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.