1
0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-16 01:10:30 +02:00
SVG icons for popular brands
Go to file
2021-10-27 18:32:32 -07:00
_data Update icon and brand color for VK, add guidelines link (#6776) 2021-10-27 08:36:40 -04:00
.github fix: wrap yes and no in quotes in issue templates (#6779) 2021-10-27 18:32:32 -07:00
.husky Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
icons Update icon and brand color for VK, add guidelines link (#6776) 2021-10-27 08:36:40 -04:00
scripts Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
tests Setup prettier (#6758) 2021-10-25 21:13:10 +02: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 Remove jest cache in CI (#6693) 2021-10-26 10:59:11 +02:00
.jsonschema.json Remove Hyphens from Filenames (#5611) 2021-05-27 19:29:34 +02:00
.npmignore Create VERSIONING.md (#6023) 2021-09-30 09:33:44 +02:00
.npmrc Drop package-lock.json (#6179) 2021-08-23 19:21:03 +02:00
.prettierignore Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
.prettierrc.js Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
.svglint-ignored.json Remove collinear segment from PCGamingWiki (#6224) 2021-09-01 10:23:27 -04:00
.svglintrc.js Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
composer.json Add composer.json (#1611) 2019-09-26 09:04:33 +03:00
CONTRIBUTING.md Create VERSIONING.md (#6023) 2021-09-30 09:33:44 +02:00
DISCLAIMER.md add removal form (#6552) 2021-09-25 12:59:53 +02:00
Dockerfile Update Node.js to v16 (#5643) 2021-05-10 10:25:37 +02:00
LICENSE.md Minor improvements (#4708) 2021-01-15 21:47:00 +01:00
package.json Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
README.md Add drawio simple-icons library to Third-Party Extensions (#6774) 2021-10-25 19:05:26 -07:00
slugs.md version bump 2021-10-24 00:13:25 +00:00
svgo.config.js Setup prettier (#6758) 2021-10-25 21:13:10 +02:00
VERSIONING.md Create VERSIONING.md (#6023) 2021-09-30 09:33:44 +02:00

Simple Icons

Simple Icons

Over 2000 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

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@v5/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v5/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@v5/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v5/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

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 import the needed icons individually, where [ICON SLUG] is replaced by a slug. This is useful if you are e.g. compiling your code with webpack and therefore have to be mindful of your package size:

// Import a specific icon by its slug as:
// require('simple-icons/icons/[ICON SLUG]');

// For example:
const icon = require('simple-icons/icons/simpleicons');

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

There are also TypeScript type definitions for the Node package. To use them, simply run:

npm install --save-dev @types/simple-icons

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
Drawio library @mondeja
Drupal module Phil Wolstenholme
Flutter package @jlnrrg
Hexo plugin @nidbCN
Home Assistant plugin @vigonotion
Jetpack Compose library @devsrsouza
Kirby plugin @runxel
Laravel Package @adrian-ub
Python package @sachinraja
React package @wootsbot
Svelte package @wootsbot
Vue package @noahlitvin
WordPress plugin @tjtaylo

Contribute

Information describing how to contribute can be found here:

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