2017-10-15 08:05:21 +02:00
< p align = "center" >
< a href = "https://simpleicons.org/" >
< img src = "https://simpleicons.org/icons/simpleicons.svg" alt = "Simple Icons" width = 64 height = 64 >
< / a >
< h3 align = "center" > Simple Icons< / h3 >
< p align = "center" >
2020-02-20 18:13:19 +02:00
Over 1000 Free SVG icons for popular brands. See them all on one page at < a href = "https://simpleicons.org" > SimpleIcons.org< / a > . Contributions, corrections & requests can be made on GitHub. Started by < a href = "https://twitter.com/bathtype" > Dan Leech< / a > .< / p >
2017-10-15 08:05:21 +02:00
< / p >
2017-04-23 17:55:38 +02:00
2017-09-17 03:54:54 +02:00
## Usage
2017-04-23 17:55:38 +02:00
2017-10-15 08:09:03 +02:00
### General Usage
2017-09-17 03:54:54 +02:00
Icons can be downloaded as SVGs directly from [our website ](https://simpleicons.org/ ) - simply click the icon you want, and the download should start automatically.
2017-10-17 19:35:02 +02:00
### CDN Usage
2020-04-22 14:23:53 +02:00
Icons can be served from a CDN such as [JSDelivr ](https://www.jsdelivr.com/package/npm/simple-icons ) or [Unpkg ](https://unpkg.com/browse/simple-icons/ ). Simply use the `simple-icons` npm package and specify a version in the URL like the following:
2017-10-17 19:35:02 +02:00
```html
2020-07-05 09:39:14 +02:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/[ICON NAME].svg" / >
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons@v3/icons/[ICON NAME].svg" / >
2019-02-03 20:40:37 +02:00
```
Where `[ICON NAME]` is replaced by the icon name, for example:
```html
2020-07-05 09:39:14 +02:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/simpleicons.svg" / >
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons@v3/icons/simpleicons.svg" / >
2017-10-17 19:35:02 +02:00
```
2020-04-22 14:23:53 +02:00
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.
2017-09-17 03:54:54 +02:00
### 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:
2017-09-17 03:56:26 +02:00
```javascript
2017-09-17 03:54:54 +02:00
const simpleIcons = require('simple-icons');
2019-07-14 21:05:38 +02:00
console.log(simpleIcons.get('Simple Icons'));
2017-09-17 03:54:54 +02:00
/*
{
2019-02-03 20:40:37 +02:00
title: 'Simple Icons',
2019-07-14 20:09:34 +02:00
slug: 'simpleicons',
2019-02-03 20:40:37 +02:00
hex: '111111',
source: 'https://simpleicons.org/',
2019-07-13 13:34:12 +02:00
svg: '< svg role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > ...< / svg > ',
path: 'M12 12v-1.5c-2.484 ...'
2017-09-17 03:54:54 +02:00
}
*/
```
2017-10-15 07:25:22 +02:00
2018-08-26 23:23:57 +02:00
Alternatively you can import the needed icons individually.
This is useful if you are e.g. compiling your code with [webpack ](https://webpack.js.org/ ) and therefore have to be mindful of your package size:
2019-02-03 20:40:37 +02:00
```javascript
const icon = require('simple-icons/icons/simpleicons');
console.log(icon);
2018-08-26 23:23:57 +02:00
/*
{
2019-02-03 20:40:37 +02:00
title: 'Simple Icons',
2019-07-14 20:09:34 +02:00
slug: 'simpleicons',
2019-02-03 20:40:37 +02:00
hex: '111111',
source: 'https://simpleicons.org/',
2019-07-13 13:34:12 +02:00
svg: '< svg role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > ...< / svg > ',
path: 'M12 12v-1.5c-2.484 ...'
2018-08-26 23:23:57 +02:00
}
*/
```
2020-02-26 18:10:52 +02:00
#### TypeScript Usage
There are also TypeScript type definitions for the Node package. To use them, simply run:
```
$ npm install @types/simple -icons
```
### PHP Usage
2019-09-26 08:04:33 +02:00
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
< ?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 >
?>
```
2018-03-21 19:51:05 +02:00
## Third Party Extensions
2018-03-21 17:42:53 +02:00
2020-05-28 19:43:25 +02:00
### Drupal
2018-03-21 19:51:05 +02:00
2020-05-29 17:05:36 +02:00
Icons are also available as a [Drupal module ](https://www.drupal.org/project/simple_icons ) created by [Phil Wolstenholme ](https://www.drupal.org/u/phil-wolstenholme ).
2018-03-21 17:42:53 +02:00
2020-06-02 12:16:16 +02:00
### Flutter
Icons are also available as a [Flutter package ](https://pub.dev/packages/flutter_brand_icons ) created by [@muj-programmer ](https://github.com/muj-programmer ).
2020-05-28 19:43:25 +02:00
### Home Assistant
2019-11-20 10:50:05 +02:00
2020-05-29 17:05:36 +02:00
Icons are also available as a [Home Assistant plugin ](https://github.com/vigonotion/hass-simpleicons ) created by [@vigonotion ](https://github.com/vigonotion/ ).
2019-11-20 10:50:05 +02:00
2020-01-07 22:39:31 +02:00
### Kirby
2020-05-29 17:05:36 +02:00
Icons are also available as a [Kirby plugin ](https://github.com/runxel/kirby3-simpleicons ) created by [@runxel ](https://github.com/runxel ).
2020-01-07 22:39:31 +02:00
2020-01-13 19:31:02 +02:00
### React
2020-05-29 17:05:36 +02:00
Icons are also available as a [React package ](https://github.com/icons-pack/react-simple-icons ) created by [@wootsbot ](https://github.com/wootsbot ).
2020-01-13 19:31:02 +02:00
2020-05-26 18:01:11 +02:00
### Svelte
2020-05-29 17:05:36 +02:00
Icons are also available as a [Svelte package ](https://github.com/icons-pack/svelte-simple-icons ) created by [@wootsbot ](https://github.com/wootsbot ).
2020-05-26 18:01:11 +02:00
2020-05-28 19:43:25 +02:00
### WordPress
2020-05-29 17:05:36 +02:00
Icons are also available as a [WordPress plugin ](https://wordpress.org/plugins/simple-icons/ ) created by [@tjtaylo ](https://github.com/tjtaylo ).
2020-05-28 19:43:25 +02:00
2017-10-15 07:25:22 +02:00
## Status
2019-06-15 14:27:14 +02:00
[![Build Status ](https://travis-ci.com/simple-icons/simple-icons.svg?branch=develop )](https://travis-ci.com/simple-icons/simple-icons)
2017-10-15 07:39:40 +02:00
[![npm version ](https://img.shields.io/npm/v/simple-icons.svg )](https://www.npmjs.com/package/simple-icons)
2020-02-06 13:33:07 +02:00
[![Packagist version ](https://img.shields.io/packagist/v/simple-icons/simple-icons )](https://packagist.org/packages/simple-icons/simple-icons)