1 | <p align="center">
|
2 | <a href="https://simpleicons.org/">
|
3 | <img src="https://simpleicons.org/icons/simpleicons.svg" alt="Simple Icons" width=64 height=64>
|
4 | </a>
|
5 | <h3 align="center">Simple Icons</h3>
|
6 | <p align="center">
|
7 | 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>
|
8 | </p>
|
9 |
|
10 | ## Usage
|
11 |
|
12 | ### General Usage
|
13 |
|
14 | 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.
|
15 |
|
16 | ### CDN Usage
|
17 |
|
18 | 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:
|
19 |
|
20 | ```html
|
21 | <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v2/icons/[ICON NAME].svg" />
|
22 | <img height="32" width="32" src="https://unpkg.com/simple-icons@v2/icons/[ICON NAME].svg" />
|
23 | ```
|
24 |
|
25 | Where `[ICON NAME]` is replaced by the icon name, for example:
|
26 |
|
27 | ```html
|
28 | <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v2/icons/simpleicons.svg" />
|
29 | <img height="32" width="32" src="https://unpkg.com/simple-icons@v2/icons/simpleicons.svg" />
|
30 | ```
|
31 |
|
32 | 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.
|
33 |
|
34 | ### Node Usage
|
35 |
|
36 | The icons are also available through our npm package. To install, simply run:
|
37 |
|
38 | ```
|
39 | $ npm install simple-icons
|
40 | ```
|
41 |
|
42 | The API can then be used as follows:
|
43 |
|
44 | ```javascript
|
45 | const simpleIcons = require('simple-icons');
|
46 |
|
47 | console.log(simpleIcons.get('Simple Icons'));
|
48 |
|
49 | /*
|
50 | {
|
51 | title: 'Simple Icons',
|
52 | slug: 'simpleicons',
|
53 | hex: '111111',
|
54 | source: 'https://simpleicons.org/',
|
55 | svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
|
56 | path: 'M12 12v-1.5c-2.484 ...'
|
57 | }
|
58 | */
|
59 | ```
|
60 |
|
61 | Alternatively you can import the needed icons individually.
|
62 | 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:
|
63 |
|
64 | ```javascript
|
65 | const icon = require('simple-icons/icons/simpleicons');
|
66 |
|
67 | console.log(icon);
|
68 |
|
69 | /*
|
70 | {
|
71 | title: 'Simple Icons',
|
72 | slug: 'simpleicons',
|
73 | hex: '111111',
|
74 | source: 'https://simpleicons.org/',
|
75 | svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
|
76 | path: 'M12 12v-1.5c-2.484 ...'
|
77 | }
|
78 | */
|
79 | ```
|
80 |
|
81 | #### TypeScript Usage
|
82 |
|
83 | There are also TypeScript type definitions for the Node package. To use them, simply run:
|
84 |
|
85 | ```
|
86 | $ npm install @types/simple-icons
|
87 | ```
|
88 |
|
89 | ### PHP Usage
|
90 |
|
91 | The icons are also available through our Packagist package. To install, simply run:
|
92 |
|
93 | ```
|
94 | $ composer require simple-icons/simple-icons
|
95 | ```
|
96 |
|
97 | The package can then be used as follows:
|
98 |
|
99 | ```php
|
100 | <?php
|
101 |
|
102 | echo file_get_contents('path/to/package/icons/simple-icons.svg');
|
103 |
|
104 | // <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
|
105 | ?>
|
106 | ```
|
107 |
|
108 | ## Third Party Extensions
|
109 |
|
110 | ### Drupal
|
111 |
|
112 | 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).
|
113 |
|
114 | ### Home Assistant
|
115 |
|
116 | Icons are also available as a [Home Assistant plugin](https://github.com/vigonotion/hass-simpleicons) created by [@vigonotion](https://github.com/vigonotion/).
|
117 |
|
118 | ### Kirby
|
119 |
|
120 | Icons are also available as a [Kirby plugin](https://github.com/runxel/kirby3-simpleicons) created by [@runxel](https://github.com/runxel).
|
121 |
|
122 | ### React
|
123 |
|
124 | Icons are also available as a [React package](https://github.com/icons-pack/react-simple-icons) created by [@wootsbot](https://github.com/wootsbot).
|
125 |
|
126 | ### Svelte
|
127 |
|
128 | Icons are also available as a [Svelte package](https://github.com/icons-pack/svelte-simple-icons) created by [@wootsbot](https://github.com/wootsbot).
|
129 |
|
130 | ### WordPress
|
131 |
|
132 | Icons are also available as a [WordPress plugin](https://wordpress.org/plugins/simple-icons/) created by [@tjtaylo](https://github.com/tjtaylo).
|
133 |
|
134 | ## Status
|
135 |
|
136 | [![Build Status](https://travis-ci.com/simple-icons/simple-icons.svg?branch=develop)](https://travis-ci.com/simple-icons/simple-icons)
|
137 | [![npm version](https://img.shields.io/npm/v/simple-icons.svg)](https://www.npmjs.com/package/simple-icons)
|
138 | [![Packagist version](https://img.shields.io/packagist/v/simple-icons/simple-icons)](https://packagist.org/packages/simple-icons/simple-icons)
|