2017-10-14 23:05:21 -07: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" >
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 >
< / p >
2017-04-23 16:55:38 +01:00
2017-09-17 03:54:54 +02:00
## Usage
2017-04-23 16:55:38 +01:00
2017-10-14 23:09:03 -07: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 13:35:02 -04:00
### CDN Usage
Icons can be served from a CDN such as [JSDelivr ](https://www.jsdelivr.com/package/npm/simple-icons ) or [Unpkg ](https://unpkg.com ). Simply use the `simple-icons` npm package and specify a version in the URL like the following:
```html
2019-02-03 19:40:37 +01:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons @latest/icons/ [ICON NAME].svg" />
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons @latest/icons/ [ICON NAME].svg" />
```
Where `[ICON NAME]` is replaced by the icon name, for example:
```html
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons @latest/icons/simpleicons .svg" />
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons @latest/icons/simpleicons .svg" />
2017-10-17 13:35:02 -04:00
```
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 20:05:38 +01:00
console.log(simpleIcons.get('Simple Icons'));
2017-09-17 03:54:54 +02:00
/*
{
2019-02-03 19:40:37 +01:00
title: 'Simple Icons',
2019-07-14 19:09:34 +01:00
slug: 'simpleicons',
2019-02-03 19:40:37 +01:00
hex: '111111',
source: 'https://simpleicons.org/',
2019-07-13 12:34:12 +01: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-14 22:25:22 -07: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 19:40:37 +01:00
```javascript
const icon = require('simple-icons/icons/simpleicons');
console.log(icon);
2018-08-26 23:23:57 +02:00
/*
{
2019-02-03 19:40:37 +01:00
title: 'Simple Icons',
2019-07-14 19:09:34 +01:00
slug: 'simpleicons',
2019-02-03 19:40:37 +01:00
hex: '111111',
source: 'https://simpleicons.org/',
2019-07-13 12:34:12 +01: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
}
*/
```
2019-09-26 09:04:33 +03:00
### 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
< ?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 18:51:05 +01:00
## Third Party Extensions
2018-03-21 16:42:53 +01:00
2018-03-21 18:51:05 +01:00
### WordPress
Icons are also available on WordPress through a simple plugin created by [@tjtaylo ](https://github.com/tjtaylo ), which you can find [here ](https://wordpress.org/plugins/simple-icons/ ).
2018-03-21 16:42:53 +01:00
2017-10-14 22:25:22 -07:00
## Status
2019-06-15 13:27:14 +01:00
[![Build Status ](https://travis-ci.com/simple-icons/simple-icons.svg?branch=develop )](https://travis-ci.com/simple-icons/simple-icons)
2017-10-14 22:39:40 -07:00
[![npm version ](https://img.shields.io/npm/v/simple-icons.svg )](https://www.npmjs.com/package/simple-icons)