SVG icons for popular brands
Go to file
Engin Diri fec2e799e8
Add Morrisons icon (#6436)
Signed-off-by: Engin Diri <engin.diri@mail.schwarz>
2022-01-13 17:02:43 -08:00
_data Add Morrisons icon (#6436) 2022-01-13 17:02:43 -08:00
.github Add some icons in Readme (#4816) 2022-01-09 15:04:36 -06:00
.husky fix: make .husky/pre-commit executable (#6787) 2021-10-28 16:29:05 -07:00
assets/readme Feature #7024. Third-Party Extensions. Added info about Angular module. (#7054) 2022-01-13 14:55:06 -08:00
icons Add Morrisons icon (#6436) 2022-01-13 17:02:43 -08:00
scripts convert scripts to esm (#6946) 2021-12-25 06:22:56 -08:00
tests Add some icons in Readme (#4816) 2022-01-09 15:04:36 -06:00
.dockerignore Remove (old) website source files (#5553) 2021-05-29 18:00:40 +02:00
.editorconfig Remove (old) website source files (#5553) 2021-05-29 18:00:40 +02:00
.gitattributes Drop package-lock.json (#6179) 2021-08-23 19:21:03 +02:00
.gitignore export bundled icons from one entry point and add types (#6767) 2021-10-28 16:16:34 -07:00
.jsonschema.json Remove Hyphens from Filenames (#5611) 2021-05-27 19:29:34 +02:00
.npmignore export bundled icons from one entry point and add types (#6767) 2021-10-28 16:16:34 -07:00
.npmrc Drop package-lock.json (#6179) 2021-08-23 19:21:03 +02:00
.prettierignore Fix publish workflow (#6803) 2021-10-31 11:38:10 +01:00
.prettierrc.js Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
.svglint-ignored.json Update Cocos icon (#6996) 2022-01-03 15:39:50 +00:00
.svglintrc.mjs convert scripts to esm (#6946) 2021-12-25 06:22:56 -08:00
alias.d.ts export bundled icons from one entry point and add types (#6767) 2021-10-28 16:16:34 -07:00
composer.json Add composer.json (#1611) 2019-09-26 09:04:33 +03:00
CONTRIBUTING.md Upgrade SVGLint dependency (#6970) 2021-12-21 19:14:29 +01:00
DISCLAIMER.md add removal form (#6552) 2021-09-25 12:59:53 +02:00
Dockerfile Update all dependencies (#6922) 2021-11-29 10:37:52 +01:00
index.d.ts Remove .get from package's default export (#6820) 2021-11-22 20:56:10 +01:00
LICENSE.md Minor improvements (#4708) 2021-01-15 21:47:00 +01:00
package.json version bump 2022-01-09 00:15:28 +00:00
README.md Feature #7024. Third-Party Extensions. Added info about Angular module. (#7054) 2022-01-13 14:55:06 -08:00
slugs.md version bump 2022-01-09 00:15:28 +00:00
svgo.config.js Update SVGO configuration (#6926) 2021-11-29 09:59:11 -08:00
VERSIONING.md Create VERSIONING.md (#6023) 2021-09-30 09:33:44 +02:00

Simple IconsSimple Icons

Simple Icons

Over 2100 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub.

Build status NPM version Build status

Number of icons currently in the library Backers and sponsors on Open Collective

Usage

We ask that all users read our legal disclaimer before using icons from Simple Icons.

General Usage

Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.

CDN Usage

Icons can be served from a CDN such as JSDelivr or Unpkg. Simply use the simple-icons npm package and specify a version in the URL like the following:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v6/icons/[ICON SLUG].svg" />

Where [ICON SLUG] is replaced by the slug of the icon you want to use, for example:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v6/icons/simpleicons.svg" />

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.

Node Usage NodeNode

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

npm install simple-icons

The API can then be used as follows, where [ICON SLUG] is replaced by a slug:

const simpleIcons = require('simple-icons');

// Get a specific icon by its slug as:
// simpleIcons.Get('[ICON SLUG]');

// For example:
const icon = simpleIcons.Get('simpleicons');

Alternatively, you can also import all icons 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 to remove the unused icon code:

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

// For example:
// use import/esm to allow tree shaking
import { siSimpleicons } from 'simple-icons/icons'

⚠️ The old way of importing with require('simple-icons/icons/[ICON SLUG]') is deprecated and will be removed in v7.0.0.

Either method will return an icon object:

console.log(icon);

/*
{
    title: 'Simple Icons',
    slug: 'simpleicons',
    hex: '111111',
    source: 'https://simpleicons.org/',
    svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</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.
*/

Lastly, the simpleIcons object is also enumerable. This is useful if you want to do a computation on every icon:

const simpleIcons = require('simple-icons');

for (const iconSlug in simpleIcons) {
  const icon = simpleIcons.Get(iconSlug);
  // do stuff
}

TypeScript Usage TypescriptTypescript

Type definitions are bundled with the package.

PHP Usage PhpPhp

The icons are also available through our Packagist package. 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:

<?php
// Import a specific icon by its slug as:
echo file_get_contents('path/to/package/icons/[ICON SLUG].svg');

// For example:
echo file_get_contents('path/to/package/icons/simpleicons.svg');

// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
?>

Third-Party Extensions

Extension Author
AngularAngular Angular Module @avmaisak
BlenderBlender Blender add-on @mondeja
DrawioDrawio Drawio library @mondeja
DrupalDrupal Drupal module Phil Wolstenholme
FlutterFlutter Flutter package @jlnrrg
HexoHexo Hexo plugin @nidbCN
Home AssistantHome Assistant Home Assistant plugin @vigonotion
Jetpack ComposeJetpack Compose Jetpack Compose library @devsrsouza
KirbyKirby Kirby plugin @runxel
LaravelLaravel Laravel Package @adrian-ub
PythonPython Python package @sachinraja
ReactReact React package @wootsbot
SvelteSvelte Svelte package @wootsbot
VueVue Vue package @noahlitvin
WordpressWordpress WordPress plugin @tjtaylo

Contribute

Good first issues open

Information describing how to contribute can be found here:

https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md