2017-10-15 08:05:21 +02:00
< p align = "center" >
2023-07-28 15:50:15 +02:00
< img src = "https://cdn.simpleicons.org/simpleicons/000/fff" alt = "Simple Icons" width = 70 >
2017-10-15 08:05:21 +02:00
< h3 align = "center" > Simple Icons< / h3 >
< p align = "center" >
2023-09-10 02:23:11 +02:00
Over 2700 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 >
2017-10-15 08:05:21 +02:00
< / p >
2017-04-23 17:55:38 +02:00
2021-01-15 11:57:58 +02:00
< p align = "center" >
2022-12-21 20:36:02 +02:00
< a href = "https://github.com/simple-icons/simple-icons/actions?query=workflow%3AVerify+branch%3Adevelop" > < img src = "https://img.shields.io/github/actions/workflow/status/simple-icons/simple-icons/verify.yml?branch=develop&logo=github&label=tests" alt = "Build status" / > < / a >
2022-01-09 23:04:36 +02:00
< 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 >
< 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 >
2023-09-01 08:32:18 +02:00
< br / >
2022-01-13 16:19:51 +02:00
< a href = "https://simpleicons.org" > < img src = "https://img.shields.io/badge/dynamic/json?color=informational&label=icons&prefix=%20&logo=simpleicons&query=%24.icons.length&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsimple-icons%2Fsimple-icons%2Fdevelop%2F_data%2Fsimple-icons.json" alt = "Number of icons currently in the library" / > < / a >
2023-09-18 09:47:28 +02:00
< a href = "https://discord.gg/vUXFa7t5xJ" > < img src = "https://img.shields.io/discord/1142044630909726760?logo=discord&logoColor=white&label=discord" alt = "Number of users active in our Discord server" / > < / a >
2022-01-13 16:19:51 +02:00
< a href = "https://opencollective.com/simple-icons" > < img src = "https://img.shields.io/opencollective/all/simple-icons?logo=opencollective" alt = "Backers and sponsors on Open Collective" / > < / a >
< / p >
2021-01-15 11:57:58 +02:00
2017-09-17 03:54:54 +02:00
## Usage
2017-04-23 17:55:38 +02:00
2023-11-28 19:48:10 +02:00
> [!NOTE]\
2023-08-14 22:41:24 +02:00
> We ask that all users read our [legal disclaimer](https://github.com/simple-icons/simple-icons/blob/develop/DISCLAIMER.md) before using icons from Simple Icons.
2021-05-29 17:46:31 +02:00
2017-10-15 08:09:03 +02:00
### General Usage
2022-09-01 17:38:30 +02:00
Icons can be downloaded as SVGs directly from [our website ](https://simpleicons.org/ ) - simply click the download button of the icon you want, and the download will start automatically.
2017-09-17 03:54:54 +02:00
2017-10-17 19:35:02 +02:00
### CDN Usage
2023-07-23 21:38:52 +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
2023-11-26 02:26:07 +02:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/[ICON SLUG].svg" / >
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons@v10/icons/[ICON SLUG].svg" / >
2019-02-03 20:40:37 +02:00
```
2022-09-01 18:01:41 +02:00
Where `[ICON SLUG]` is replaced by the [slug] of the icon you want to use, for example:
2019-02-03 20:40:37 +02:00
```html
2023-11-26 02:26:07 +02:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/simpleicons.svg" / >
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons@v10/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.
2022-11-07 18:51:15 +02:00
#### CDN with colors
We also provide a CDN service which allows you to use colors.
```html
2022-11-27 13:46:23 +02:00
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/[ICON SLUG]" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" / >
2023-07-10 16:18:19 +02:00
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]/[DARK_MODE_COLOR]" / >
2022-11-07 18:51:15 +02:00
```
2023-07-10 16:18:19 +02:00
Where `[COLOR]` is optional, and can be replaced by the [hex colors ](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color ) or [CSS keywords ](https://www.w3.org/wiki/CSS/Properties/color/keywords ) of the icon you want to you use. The color is defaulted to the HEX color of the icon shown in [simpleicons.org website ](https://simpleicons.org ). `[DARK_MODE_COLOR]` is used for dark mode. The [CSS prefers-color-scheme ](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme ) will be used when a value is specified. For example:
2022-11-07 18:51:15 +02:00
```html
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/gray" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/hotpink" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/0cf" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/0cf9" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/00ccff" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/00ccff99" / >
2023-07-11 15:25:11 +02:00
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/orange/pink" / >
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/_/eee" / >
2023-11-27 12:48:32 +02:00
< img height = "32" width = "32" src = "https://cdn.simpleicons.org/simpleicons/eee/_" / >
2022-11-07 18:51:15 +02:00
```
2023-07-28 15:50:15 +02:00
### Node Usage <img src="https://cdn.simpleicons.org/nodedotjs/000/fff" alt="Node" align=left width=24>
2017-09-17 03:54:54 +02:00
The icons are also available through our npm package. To install, simply run:
2021-05-29 19:40:37 +02:00
```shell
npm install simple-icons
2017-09-17 03:54:54 +02:00
```
2022-05-27 08:18:44 +02:00
All icons are imported from a single file, where `[ICON SLUG]` is replaced by a capitalized [slug]. We highly recommend using a bundler that can tree shake such as [webpack ](https://webpack.js.org/ ) to remove the unused icon code:
2021-10-29 01:16:34 +02:00
```javascript
// Import a specific icon by its slug as:
2022-11-28 13:32:57 +02:00
// import { si[ICON SLUG] } from 'simple-icons'
2021-10-29 01:16:34 +02:00
// For example:
// use import/esm to allow tree shaking
2022-11-28 13:32:57 +02:00
import { siSimpleicons } from 'simple-icons';
2022-05-26 14:29:37 +02:00
// or with require/cjs
2022-11-28 13:32:57 +02:00
const { siSimpleicons } = require('simple-icons');
2021-10-29 01:16:34 +02:00
```
2018-08-26 23:23:57 +02:00
2022-05-26 14:29:37 +02:00
It will return an icon object:
2021-05-13 13:37:46 +02:00
```javascript
2022-05-26 14:29:37 +02:00
console.log(siSimpleicons);
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 > ',
2021-03-02 14:01:31 +02:00
path: 'M12 12v-1.5c-2.484 ...',
2021-03-26 11:33:04 +02:00
guidelines: 'https://simpleicons.org/styleguide',
2021-03-02 14:01:31 +02:00
license: {
type: '...',
url: 'https://example.com/'
}
2018-08-26 23:23:57 +02:00
}
2021-03-02 14:01:31 +02:00
2021-05-13 13:37:46 +02:00
NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.
NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.
2018-08-26 23:23:57 +02:00
*/
```
2022-11-28 13:32:57 +02:00
If you need to iterate over all icons, use:
```javascript
import * as icons from 'simple-icons';
```
2023-07-28 15:50:15 +02:00
#### TypeScript Usage <img src="https://cdn.simpleicons.org/typescript/000/fff" alt="Typescript" align=left width=19 height=19>
2020-02-26 18:10:52 +02:00
2021-10-29 01:16:34 +02:00
Type definitions are bundled with the package.
2020-02-26 18:10:52 +02:00
2022-11-28 13:32:57 +02:00
```typescript
import type { SimpleIcon } from 'simple-icons';
```
2023-07-28 15:50:15 +02:00
### PHP Usage <img src="https://cdn.simpleicons.org/php/000/fff" alt="Php" align=left width=24 height=24>
2019-09-26 08:04:33 +02:00
The icons are also available through our Packagist package. To install, simply run:
2021-05-29 19:40:37 +02:00
```shell
composer require simple-icons/simple-icons
2019-09-26 08:04:33 +02:00
```
2021-03-03 12:57:33 +02:00
The package can then be used as follows, where `[ICON SLUG]` is replaced by a [slug]:
2019-09-26 08:04:33 +02:00
```php
< ?php
2021-03-03 12:57:33 +02:00
// Import a specific icon by its slug as:
echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');
2019-09-26 08:04:33 +02:00
2021-03-03 12:57:33 +02:00
// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');
2019-09-26 08:04:33 +02:00
// < svg role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > ...< / svg >
?>
```
2021-10-01 15:46:35 +02:00
## Third-Party Extensions
2018-03-21 17:42:53 +02:00
2023-11-24 23:16:23 +02:00
| Extension | Author | License | Simple Icons Version |
| :-- | :-- | :-: | :-: |
| [Angular module ](https://github.com/avmaisak/ngx-simple-icons ) < img src = "https://cdn.simpleicons.org/angular/000/fff" alt = "Angular" align = left width = 24 height = 24 > | [@avmaisak ](https://github.com/avmaisak ) |  | [](https://github.com/simple-icons/simple-icons/tree/6.18.0) |
2023-11-27 22:48:20 +02:00
| [Blazor Nuget package ](https://github.com/TimeWarpEngineering/timewarp-simple-icons ) < img src = "https://cdn.simpleicons.org/blazor/000/fff" alt = "Blazor" align = left width = 24 height = 24 > | [@TimeWarpEngineering ](https://github.com/TimeWarpEngineering ) |  |  |
| [Blender add-on ](https://github.com/mondeja/simple-icons-blender ) < img src = "https://cdn.simpleicons.org/blender/000/fff" alt = "Blender" align = left width = 24 height = 24 > | [@mondeja ](https://github.com/mondeja ) |  |  |
| [Drawio library ](https://github.com/mondeja/simple-icons-drawio ) < img src = "https://cdn.simpleicons.org/diagramsdotnet/000/fff" alt = "Drawio" align = left width = 24 height = 24 > | [@mondeja ](https://github.com/mondeja ) |  |  |
| [Drupal module ](https://www.drupal.org/project/simple_icons ) < img src = "https://cdn.simpleicons.org/drupal/000/fff" alt = "Drupal" align = left width = 24 height = 24 > | [Phil Wolstenholme ](https://www.drupal.org/u/phil-wolstenholme ) |  |  |
| [Figma plugin ](https://www.figma.com/community/plugin/1149614463603005908/Simple-Icons ) < img src = "https://cdn.simpleicons.org/figma/000/fff" alt = "Figma" align = left width = 24 height = 24 > | [@LitoMore ](https://github.com/LitoMore ) |  |  |
| [Flutter package ](https://pub.dev/packages/simple_icons ) < img src = "https://cdn.simpleicons.org/flutter/000/fff" alt = "Flutter" align = left width = 24 height = 24 > | [@jlnrrg ](https://github.com/jlnrrg ) |  |  |
| [Framer component ](https://github.com/LitoMore/simple-icons-framer ) < img src = "https://cdn.simpleicons.org/framer/000/fff" alt = "Framer" align = left width = 24 height = 24 > | [@LitoMore ](https://github.com/LitoMore ) |  |  |
| [Hexo plugin ](https://github.com/nidbCN/hexo-simpleIcons ) < img src = "https://cdn.simpleicons.org/hexo/000/fff" alt = "Hexo" align = left width = 24 height = 24 > | [@nidbCN ](https://github.com/nidbCN/ ) |  |  |
2023-11-24 23:16:23 +02:00
| [Home Assistant plugin ](https://github.com/vigonotion/hass-simpleicons ) < img src = "https://cdn.simpleicons.org/homeassistant/000/fff" alt = "Home Assistant" align = left width = 24 height = 24 > | [@vigonotion ](https://github.com/vigonotion/ ) |  | [](https://github.com/simple-icons/simple-icons/tree/7.14.0) |
2023-11-27 22:48:20 +02:00
| [Hugo module ](https://github.com/foo-dogsquared/hugo-mod-simple-icons ) < img src = "https://cdn.simpleicons.org/hugo/000/fff" alt = "Hugo" align = left width = 24 height = 24 > | [@foo-dogsquared ](https://github.com/foo-dogsquared ) |  |  |
2023-11-28 20:45:46 +02:00
| [Java library ](https://github.com/silentsoft/simpleicons4j ) < img src = "https://cdn.simpleicons.org/openjdk/000/fff" alt = "OpenJDK" align = left width = 24 height = 24 > | [@silentsoft ](https://github.com/silentsoft ) |  |  |
2023-11-24 23:16:23 +02:00
| [Jetpack Compose library ](https://github.com/DevSrSouza/compose-icons ) < img src = "https://cdn.simpleicons.org/jetpackcompose/000/fff" alt = "Jetpack Compose" align = left width = 24 height = 24 > | [@DevSrSouza ](https://github.com/devsrsouza/ ) |  | [](https://github.com/simple-icons/simple-icons/tree/4.14.0) |
2023-11-27 22:48:20 +02:00
| [Kirby plugin ](https://github.com/runxel/kirby3-simpleicons ) < img src = "https://cdn.simpleicons.org/kirby/000/fff" alt = "Kirby" align = left width = 24 height = 24 > | [@runxel ](https://github.com/runxel ) |  |  |
| [LaTeX package ](https://github.com/ineshbose/simple-icons-latex ) < img src = "https://cdn.simpleicons.org/latex/000/fff" alt = "LaTeX" align = left width = 24 height = 24 > | [@ineshbose ](https://github.com/ineshbose ) |  |  |
| [Laravel package ](https://github.com/ublabs/blade-simple-icons ) < img src = "https://cdn.simpleicons.org/laravel/000/fff" alt = "Laravel" align = left width = 24 height = 24 > | [@adrian-ub ](https://github.com/adrian-ub ) |  |  |
2023-11-24 23:16:23 +02:00
| [Leptos crate ](https://github.com/Carlosted/leptos-icons ) < img src = "https://cdn.simpleicons.org/leptos/000/fff" alt = "Leptos" align = left width = 24 height = 24 > | [@Carlosted ](https://github.com/Carlosted ) |  | [](https://github.com/simple-icons/simple-icons/tree/9.14.0) |
| [Python package ](https://github.com/sachinraja/simple-icons-py ) < img src = "https://cdn.simpleicons.org/python/000/fff" alt = "Python" align = left width = 24 height = 24 > | [@sachinraja ](https://github.com/sachinraja ) |  | [](https://github.com/simple-icons/simple-icons/tree/7.21.0) |
2023-11-27 22:48:20 +02:00
| [React package ](https://github.com/icons-pack/react-simple-icons ) < img src = "https://cdn.simpleicons.org/react/000/fff" alt = "React" align = left width = 24 height = 24 > | [@wootsbot ](https://github.com/wootsbot ) |  |  |
| [Ruby gem ](https://rubygems.org/gems/simple-icons-rails ) < img src = "https://cdn.simpleicons.org/rubygems/000/fff" alt = "Ruby" align = left width = 24 height = 24 > | [@thepew ](https://github.com/the-pew-inc ) |  |  |
2023-11-24 23:16:23 +02:00
| [Solid package ](https://github.com/x64Bits/solid-icons ) < img src = "https://cdn.simpleicons.org/solid/000/fff" alt = "Solid" align = left width = 24 height = 24 > | [@x64Bits ](https://github.com/x64Bits ) |  | [](https://github.com/simple-icons/simple-icons/tree/9.0.0) |
2023-11-29 07:49:33 +02:00
| [Stream Deck icon pack ](https://github.com/mackenly/simple-icons-stream-deck ) < img src = "https://cdn.simpleicons.org/elgato/000/fff" alt = "Stream Deck" align = left width = 24 height = 24 > | [@mackenly ](https://github.com/mackenly ) |  |  |
2023-11-27 22:48:20 +02:00
| [Svelte package ](https://github.com/icons-pack/svelte-simple-icons ) < img src = "https://cdn.simpleicons.org/svelte/000/fff" alt = "Svelte" align = left width = 24 height = 24 > | [@wootsbot ](https://github.com/wootsbot ) |  |  |
| [Vue 3 package ](https://github.com/wyatt-herkamp/vue3-simple-icons ) < img src = "https://cdn.simpleicons.org/vuedotjs/000/fff" alt = "Vue" align = left width = 24 height = 24 > | [@wyatt-herkamp ](https://github.com/wyatt-herkamp ) |  |  |
| [Vue package ](https://github.com/mainvest/vue-simple-icons ) < img src = "https://cdn.simpleicons.org/vuedotjs/000/fff" alt = "Vue" align = left width = 24 height = 24 > | [@noahlitvin ](https://github.com/noahlitvin ) |  |  |
2023-11-24 23:16:23 +02:00
| [WordPress plugin ](https://wordpress.org/plugins/simple-icons/ ) < img src = "https://cdn.simpleicons.org/wordpress/000/fff" alt = "WordPress" align = left width = 24 height = 24 > | [@tjtaylo ](https://github.com/tjtaylo ) |  | [](https://github.com/simple-icons/simple-icons/tree/4.25.0) |
2023-11-28 19:48:10 +02:00
> [!IMPORTANT]\
2023-11-24 23:16:23 +02:00
> From our next major release (v11, releasing on May 26, 2024), we will begin removing third-party extensions from the above list that are not up to date with at least our previous major release.\
> For example, when v11 is released, we will remove any extensions that don't support `v10.0.0` or higher.\
> Please create a PR to update the version number of your extension in this README following each update of your extension.
2021-03-03 12:57:33 +02:00
2021-10-19 03:58:29 +02:00
## Contribute
2022-01-13 16:19:51 +02:00
[](https://github.com/simple-icons/simple-icons/labels/good%20first%20issue)
2022-09-01 17:38:30 +02:00
Information describing how to contribute can be found in the file [CONTRIBUTING.md ](https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md )
2022-09-01 18:01:41 +02:00
[slug]: https://github.com/simple-icons/simple-icons/blob/master/slugs.md
