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" >
2024-09-22 02:31:39 +02:00
Over 3200 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
2024-02-20 18:57:38 +02:00
> [!IMPORTANT]\
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
2024-09-15 05:07:55 +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
2024-06-30 02:28:00 +02:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/[ICON SLUG].svg" / >
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons@v13/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
2024-06-30 02:28:00 +02:00
< img height = "32" width = "32" src = "https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/simpleicons.svg" / >
< img height = "32" width = "32" src = "https://unpkg.com/simple-icons@v13/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
```
2024-05-26 13:58:38 +02:00
You can use a `viewbox=auto` parameter to get a auto-sized viewbox. This is useful if you want all icons rendered with consistent size:
```html
< img height = "20" src = "https://cdn.simpleicons.org/github?viewbox=auto" / >
< img height = "20" src = "https://cdn.simpleicons.org/simpleicons?viewbox=auto" / >
< img height = "20" src = "https://cdn.simpleicons.org/awesomelists?viewbox=auto" / >
```
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
2024-05-20 13:25:30 +02:00
The below are known extensions to third-party tools.
| Extension | Author |
| :- | :- |
| [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 ) |
| [Boxy SVG library ](https://boxy-svg.com/ideas/298/simple-icons-library-provider ) < img src = "https://cdn.simpleicons.org/boxysvg/000/fff" alt = "Boxy SVG" align = left width = 24 height = 24 > | [@Jarek ](https://boxy-svg.com/profiles/0000000000/jarek ) |
| [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 ) |
2024-09-12 07:56:19 +02:00
| [Figma plugin ](https://www.figma.com/community/plugin/1149614463603005908 ) < img src = "https://cdn.simpleicons.org/figma/000/fff" alt = "Figma" align = left width = 24 height = 24 > | [@LitoMore ](https://github.com/LitoMore ) |
2024-05-20 13:25:30 +02:00
| [Miro app ](https://miro.com/marketplace/brand-icons/ ) < img src = "https://cdn.simpleicons.org/miro/000/fff" alt = "Miro" align = left width = 24 height = 24 > | [@LitoMore ](https://github.com/LitoMore ) |
| [Raycast extension ](https://www.raycast.com/litomore/simple-icons ) < img src = "https://cdn.simpleicons.org/raycast/000/fff" alt = "Raycast" align = left width = 24 height = 24 > | [@LitoMore ](https://github.com/LitoMore ) |
| [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 ) |  |  |
| [Webflow app ](https://webflow.com/apps/detail/simple-icons ) < img src = "https://cdn.simpleicons.org/webflow/000/fff" alt = "Webflow" align = left width = 24 height = 24 > | [@diegoliv ](https://github.com/diegoliv ) |
Maintain an extension? [Submit a PR][open-pr] to include it in the list above.
## Third-Party Libraries
The below are known third-party libraries for use in your own projects. We only keep items in the list that are at least up to date with our previous major version.
| Library | Author | License | Simple Icons Version |
2023-11-24 23:16:23 +02:00
| :-- | :-- | :-: | :-: |
2024-07-12 09:45:44 +02:00
| [Astro package ](https://github.com/dzeiocom/simple-icons-astro ) < img src = "https://cdn.simpleicons.org/astro/000/fff" alt = "Astro" align = left width = 24 height = 24 > | [@Aviortheking ](https://github.com/aviortheking ) |  |  |
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 ) |  |  |
2024-05-26 16:06:30 +02:00
| [Flutter package ](https://github.com/jlnrrg/simple_icons ) < img src = "https://cdn.simpleicons.org/flutter/000/fff" alt = "Flutter" align = left width = 24 height = 24 > | [@jlnrrg ](https://github.com/jlnrrg ) |  | 
2023-11-27 22:48:20 +02:00
| [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 ) |  |  |
| [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 ) |  |  |
| [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 ) |  |  |
| [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 ) |  |  |
| [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 ) |  |  |
2024-01-12 18:00:29 +02:00
| [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 ) |  |  |
2023-11-24 23:16:23 +02:00
2024-05-20 13:25:30 +02:00
Maintain a library? [Submit a PR][open-pr] to include it in the list above.
2021-03-03 12:57:33 +02:00
2021-10-19 03:58:29 +02:00
## Contribute
2023-12-07 14:39:32 +02:00
[](https://github.com/simple-icons/simple-icons/issues?q=is%3Aopen+label%3A%22good+first+issue%22+-linked%3Apr)
[](https://github.com/simple-icons/simple-icons/issues?q=is%3Aissue+is%3Aopen+label%3A%22new+icon%22%2C%22update+icon%2Fdata%22)
[](https://github.com/simple-icons/simple-icons/issues?q=is%3Aissue+is%3Aopen+label%3Adocs%2Cmeta%2Cpackage+-linked%3Apr)
[](https://github.com/simple-icons/simple-icons/issues?q=is%3Aopen+is%3Aissue+label%3Adocs+-linked%3Apr)
2022-01-13 16:19:51 +02:00
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
2024-05-20 13:25:30 +02:00
[open-pr]: https://github.com/simple-icons/simple-icons/compare
2024-02-12 17:32:39 +02:00
## Contributors
< a href = "https://github.com/simple-icons/simple-icons/graphs/contributors" >
< img src = "https://opencollective.com/simple-icons/contributors.svg?width=890&button=false" / >
< / a >
