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 1500 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.</p>
|
8 | </p>
|
9 |
|
10 | <p align="center">
|
11 | <a href="https://github.com/simple-icons/simple-icons/actions?query=workflow%3AVerify+branch%3Adevelop"><img src="https://img.shields.io/github/workflow/status/simple-icons/simple-icons/Verify/develop?logo=github" alt="Build status" /></a>
|
12 | <a href="https://www.npmjs.com/package/simple-icons"><img src="https://img.shields.io/npm/v/simple-icons.svg?logo=npm" alt="NPM version" /></a>
|
13 | <a href="https://packagist.org/packages/simple-icons/simple-icons"><img src="https://img.shields.io/packagist/v/simple-icons/simple-icons?logo=packagist&logoColor=white" alt="Build status" /></a>
|
14 | </p>
|
15 |
|
16 | ## Usage
|
17 |
|
18 | > :information_source: We ask that all users read our [legal disclaimer](./DISCLAIMER.md) before using icons from Simple Icons.
|
19 |
|
20 | ### General Usage
|
21 |
|
22 | 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.
|
23 |
|
24 | ### CDN Usage
|
25 |
|
26 | 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:
|
27 |
|
28 | ```html
|
29 | <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/[ICON SLUG].svg" />
|
30 | <img height="32" width="32" src="https://unpkg.com/simple-icons@v5/icons/[ICON SLUG].svg" />
|
31 | ```
|
32 |
|
33 | Where `[ICON SLUG]` is replaced by the [slug] of the icon you want to use, for example:
|
34 |
|
35 | ```html
|
36 | <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/simpleicons.svg" />
|
37 | <img height="32" width="32" src="https://unpkg.com/simple-icons@v5/icons/simpleicons.svg" />
|
38 | ```
|
39 |
|
40 | 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.
|
41 |
|
42 | ### Node Usage
|
43 |
|
44 | The icons are also available through our npm package. To install, simply run:
|
45 |
|
46 | ```shell
|
47 | npm install simple-icons
|
48 | ```
|
49 |
|
50 | The API can then be used as follows, where `[ICON SLUG]` is replaced by a [slug]:
|
51 |
|
52 | ```javascript
|
53 | const simpleIcons = require('simple-icons');
|
54 |
|
55 | // Get a specific icon by its slug as:
|
56 | // simpleIcons.Get('[ICON SLUG]');
|
57 |
|
58 | // For example:
|
59 | const icon = simpleIcons.Get('simpleicons');
|
60 |
|
61 | ```
|
62 |
|
63 | Alternatively you can import the needed icons individually, where `[ICON SLUG]` is replaced by a [slug].
|
64 | 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:
|
65 |
|
66 | ```javascript
|
67 | // Import a specific icon by its slug as:
|
68 | // require('simple-icons/icons/[ICON SLUG]');
|
69 |
|
70 | // For example:
|
71 | const icon = require('simple-icons/icons/simpleicons');
|
72 | ```
|
73 |
|
74 | Either method will return an icon object:
|
75 |
|
76 | ```javascript
|
77 | console.log(icon);
|
78 |
|
79 | /*
|
80 | {
|
81 | title: 'Simple Icons',
|
82 | slug: 'simpleicons',
|
83 | hex: '111111',
|
84 | source: 'https://simpleicons.org/',
|
85 | svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',
|
86 | path: 'M12 12v-1.5c-2.484 ...',
|
87 | guidelines: 'https://simpleicons.org/styleguide',
|
88 | license: {
|
89 | type: '...',
|
90 | url: 'https://example.com/'
|
91 | }
|
92 | }
|
93 |
|
94 | NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
|
95 | NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
|
96 | */
|
97 | ```
|
98 |
|
99 | Lastly, the `simpleIcons` object is also enumerable.
|
100 | This is useful if you want to do a computation on every icon:
|
101 |
|
102 | ```javascript
|
103 | const simpleIcons = require('simple-icons');
|
104 |
|
105 | for (const iconSlug in simpleIcons) {
|
106 | const icon = simpleIcons.Get(iconSlug);
|
107 | // do stuff
|
108 | }
|
109 | ```
|
110 |
|
111 | #### TypeScript Usage
|
112 |
|
113 | There are also TypeScript type definitions for the Node package. To use them, simply run:
|
114 |
|
115 | ```shell
|
116 | npm install @types/simple-icons
|
117 | ```
|
118 |
|
119 | ### PHP Usage
|
120 |
|
121 | The icons are also available through our Packagist package. To install, simply run:
|
122 |
|
123 | ```shell
|
124 | composer require simple-icons/simple-icons
|
125 | ```
|
126 |
|
127 | The package can then be used as follows, where `[ICON SLUG]` is replaced by a [slug]:
|
128 |
|
129 | ```php
|
130 | <?php
|
131 | // Import a specific icon by its slug as:
|
132 | echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');
|
133 |
|
134 | // For example:
|
135 | echo file_get_contents('path/to/package/icons/simpleicons.svg');
|
136 |
|
137 | // <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
|
138 | ?>
|
139 | ```
|
140 |
|
141 | ## Third Party Extensions
|
142 |
|
143 | | Extension | Author |
|
144 | | :--- | :--- |
|
145 | | [Drupal module](https://www.drupal.org/project/simple_icons) | [Phil Wolstenholme](https://www.drupal.org/u/phil-wolstenholme) |
|
146 | | [Flutter package](https://pub.dev/packages/simple_icons) | [@jlnrrg](https://jlnrrg.github.io/) |
|
147 | | [Hexo plugin](https://github.com/nidbCN/hexo-simpleIcons) | [@nidbCN](https://github.com/nidbCN/) |
|
148 | | [Home Assistant plugin](https://github.com/vigonotion/hass-simpleicons) | [@vigonotion](https://github.com/vigonotion/) |
|
149 | | [Jetpack Compose library](https://github.com/DevSrSouza/compose-icons) | [@devsrsouza](https://github.com/devsrsouza/) |
|
150 | | [Kirby plugin](https://github.com/runxel/kirby3-simpleicons) | [@runxel](https://github.com/runxel) |
|
151 | | [Laravel Package](https://github.com/ublabs/blade-simple-icons) | [@adrian-ub](https://github.com/adrian-ub) |
|
152 | | [Python package](https://github.com/sachinraja/simpleicons) | [@sachinraja](https://github.com/sachinraja) |
|
153 | | [React package](https://github.com/icons-pack/react-simple-icons) | [@wootsbot](https://github.com/wootsbot) |
|
154 | | [Svelte package](https://github.com/icons-pack/svelte-simple-icons) | [@wootsbot](https://github.com/wootsbot) |
|
155 | | [Vue package](https://github.com/mainvest/vue-simple-icons) | [@noahlitvin](https://github.com/noahlitvin) |
|
156 | | [WordPress plugin](https://wordpress.org/plugins/simple-icons/) | [@tjtaylo](https://github.com/tjtaylo) |
|
157 |
|
158 | [slug]: ./slugs.md
|