simple-icons

Simple Icons

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

Usage

:information_source: 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 download button of the icon you want, and the download will 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@v7/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v7/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@v7/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v7/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

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. 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';
// or with require/cjs
const { siSimpleicons } = require('simple-icons/icons');

It will return an icon object:

console.log(siSimpleicons);

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

TypeScript Usage

Type definitions are bundled with the package.

PHP Usage

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
Angular Module	@avmaisak
Blazor Nuget	@TimeWarpEngineering
Blender add-on	@mondeja
Drawio library	@mondeja
Drupal module	Phil Wolstenholme
Figma plugin	@LitoMore
Flutter package	@jlnrrg
Hexo plugin	@nidbCN
Home Assistant plugin	@vigonotion
Hugo module	@foo-dogsquared
Java library	@silentsoft
Jetpack Compose library	@devsrsouza
Kirby plugin	@runxel
LaTeX package	@ineshbose
Laravel Package	@adrian-ub
Python package	@sachinraja
React package	@wootsbot
Stream Deck icon pack	@mackenly
Svelte package	@wootsbot
Vue 3 package	@wyatt-herkamp
Vue package	@noahlitvin
WordPress plugin	@tjtaylo

Contribute

Information describing how to contribute can be found in the file CONTRIBUTING.md