PHPackages                             simple-icons/simple-icons - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. simple-icons/simple-icons

ActiveLibrary[Utility & Helpers](/categories/utility)

simple-icons/simple-icons
=========================

SVG icons for popular brands

16.24.1(4d ago)25.3k216.2k↑30.1%3.1k[754 issues](https://github.com/simple-icons/simple-icons/issues)[121 PRs](https://github.com/simple-icons/simple-icons/pulls)4CC0-1.0JavaScriptCI passing

Since Oct 6Pushed 4d ago173 watchersCompare

[ Source](https://github.com/simple-icons/simple-icons)[ Packagist](https://packagist.org/packages/simple-icons/simple-icons)[ Docs](https://simpleicons.org/)[ OpenCollective](https://opencollective.com/simple-icons)[ RSS](/packages/simple-icons-simple-icons/feed)WikiDiscussions develop Synced yesterday

READMEChangelog (10)DependenciesVersions (313)Used By (4)

[![Simple Icons](https://camo.githubusercontent.com/fe8000c20d8acd296f904ac7149df1b38bcd1a24a57107f6f20eef3956ae3934/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f73696d706c6569636f6e732f3030302f666666)](https://camo.githubusercontent.com/fe8000c20d8acd296f904ac7149df1b38bcd1a24a57107f6f20eef3956ae3934/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f73696d706c6569636f6e732f3030302f666666)

### Simple Icons

[](#simple-icons)

Over 3400 SVG icons for popular brands. See them all on one page at [SimpleIcons.org](https://simpleicons.org). Contributions, corrections & requests can be made on GitHub.

[![Number of icons currently in the library](https://camo.githubusercontent.com/afc6bc68ae8faa94c22176e7b18a84e22748f6964b6da52e82888233210b391d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64796e616d69632f6a736f6e3f636f6c6f723d696e666f726d6174696f6e616c266c6162656c3d69636f6e73267072656669783d253230266c6f676f3d73696d706c6569636f6e732671756572793d2532342e6c656e6774682675726c3d68747470732533412532462532467261772e67697468756275736572636f6e74656e742e636f6d25324673696d706c652d69636f6e7325324673696d706c652d69636f6e73253246646576656c6f702532466461746125324673696d706c652d69636f6e732e6a736f6e)](https://simpleicons.org)[![NPM version](https://camo.githubusercontent.com/df7e2e0960b89f7fd3b74190074fec7010f84326b146c47051dcd5f533fe5f58/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f73696d706c652d69636f6e732e7376673f6c6f676f3d6e706d)](https://www.npmjs.com/package/simple-icons)[![Build status](https://camo.githubusercontent.com/03f429c68625ab4be2ce0c85a05cdc52e181bd3ede6040c8aa3be172e7cacba8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73696d706c652d69636f6e732f73696d706c652d69636f6e733f6c6f676f3d7061636b6167697374266c6f676f436f6c6f723d7768697465)](https://packagist.org/packages/simple-icons/simple-icons)
[![Build status](https://camo.githubusercontent.com/d9d7c49001cad35977e6201f68f101a6a55a040bba68d1b084a401f498245131/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f73696d706c652d69636f6e732f73696d706c652d69636f6e732f7665726966792e796d6c3f6272616e63683d646576656c6f70266c6f676f3d676974687562266c6162656c3d7465737473)](https://github.com/simple-icons/simple-icons/actions?query=workflow%3AVerify+branch%3Adevelop)[![Number of users active in our Discord server](https://camo.githubusercontent.com/d40d07eaf2950cf4b892a3e6f1cf6421cc3fe5945ecede18eedb0a8420c5fae6/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f313134323034343633303930393732363736303f6c6f676f3d646973636f7264266c6f676f436f6c6f723d7768697465266c6162656c3d646973636f7264)](https://discord.gg/vUXFa7t5xJ)[![Backers and sponsors on Open Collective](https://camo.githubusercontent.com/d0e5ba0482e644d56ee69d37b0b930fc8492908bda81181e71890c826faa693c/68747470733a2f2f696d672e736869656c64732e696f2f6f70656e636f6c6c6563746976652f616c6c2f73696d706c652d69636f6e733f6c6f676f3d6f70656e636f6c6c656374697665266c6f676f436f6c6f723d666666)](https://opencollective.com/simple-icons)

Usage
-----

[](#usage)

Important

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.

### General Usage

[](#general-usage)

Icons can be downloaded as SVGs directly from [simpleicons.org](https://simpleicons.org) - simply click the download button of the icon you want, and the download will start automatically.

### CDN Usage

[](#cdn-usage)

Icons can be served from a CDN such as [jsDelivr](https://www.jsdelivr.com/package/npm/simple-icons) or [unpkg](https://app.unpkg.com/simple-icons). Simply use the `simple-icons` npm package and specify a version in the URL like the following:

```

```

Where `[ICON SLUG]` is replaced by the [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md) of the icon you want to use, for example:

```

```

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.

#### CDN with colors

[](#cdn-with-colors)

We also provide a CDN service which allows you to use colors.

```

```

Where `[COLOR]` is optional, and can be replaced by the [hex colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/hex-color) or [CSS keywords](https://www.w3.org/wiki/CSS/Properties/color/keywords) of the icon you want to 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/Reference/At-rules/@media/prefers-color-scheme) will be used when a value is specified. For example:

```

```

You can use a `viewbox=auto` parameter to get an auto-sized viewbox. This is useful if you want all icons rendered with consistent size:

```

```

See [simple-icons-cdn](https://github.com/LitoMore/simple-icons-cdn) to learn more usages.

### Node Usage [![Node](https://camo.githubusercontent.com/bfead3f67af8d4a7882aa02674034d6c2c20d374a1d009d171d3dd3f2d70b780/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f6e6f6465646f746a732f3030302f666666)](https://camo.githubusercontent.com/bfead3f67af8d4a7882aa02674034d6c2c20d374a1d009d171d3dd3f2d70b780/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f6e6f6465646f746a732f3030302f666666)

[](#node-usage-)

The icons are also available through our npm package. To install, simply run:

```
npm install simple-icons
```

All icons are imported from a single file, where `[ICON SLUG]` is replaced by a capitalized [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md). We highly recommend using a bundler that can tree shake such as [webpack](https://webpack.js.org/) to remove the unused icon code:

```
// Import a specific icon by its slug as:
// import { si[ICON SLUG] } from 'simple-icons'

// For example:
// use import/esm to allow tree shaking
import {siSimpleicons} from 'simple-icons';
// or with require/cjs
const {siSimpleicons} = require('simple-icons');
```

It will return an icon object:

```
console.log(siSimpleicons);

/*
{
    title: 'Simple Icons',
    slug: 'simpleicons',
    hex: '111111',
    source: 'https://simpleicons.org/',
    svg: '...',
    path: 'M12 12v-1.5c-2.484 ...',
    guidelines: 'https://simpleicons.org/styleguide',
    license: {
        type: '...',
        url: 'https://example.com/'
    }
}

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.
*/
```

If you need to iterate over all icons, use:

```
import * as icons from 'simple-icons';
```

#### TypeScript Usage [![TypeScript](https://camo.githubusercontent.com/104524771eb1b84d5e4bdd1efa144dc946337fe8a24044a1020eac5648757d14/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f747970657363726970742f3030302f666666)](https://camo.githubusercontent.com/104524771eb1b84d5e4bdd1efa144dc946337fe8a24044a1020eac5648757d14/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f747970657363726970742f3030302f666666)

[](#typescript-usage-)

Type definitions are bundled with the package.

```
import type {SimpleIcon} from 'simple-icons';
```

### PHP Usage [![Php](https://camo.githubusercontent.com/a4f284e4e12efe634cfe158b2552122507780fd6fd3e35d3814588403607a532/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f7068702f3030302f666666)](https://camo.githubusercontent.com/a4f284e4e12efe634cfe158b2552122507780fd6fd3e35d3814588403607a532/68747470733a2f2f63646e2e73696d706c6569636f6e732e6f72672f7068702f3030302f666666)

[](#php-usage-)

The icons are also available through [our Packagist package](https://packagist.org/packages/simple-icons/simple-icons). To install, simply run:

```
composer require simple-icons/simple-icons
```

The package can then be used as follows, where `[ICON SLUG]` is replaced by a [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md):

```