Skip to content

dylancopeland/simple-icons

This branch is 3 commits ahead of, 4629 commits behind simple-icons/simple-icons:develop.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5bca662 · Feb 28, 2020
Jan 22, 2020
Feb 28, 2020
Feb 28, 2020
Apr 27, 2017
Feb 26, 2020
Jul 24, 2019
Apr 22, 2019
Aug 18, 2019
Oct 19, 2019
Aug 6, 2019
Jul 3, 2019
Sep 17, 2017
Jul 3, 2019
Jan 25, 2020
Feb 7, 2020
Nov 2, 2015
Feb 26, 2020
Aug 10, 2018
Feb 26, 2020
Sep 26, 2019
Feb 21, 2020
Feb 16, 2020
Feb 26, 2020
Feb 3, 2019
Feb 3, 2019

Repository files navigation

Simple Icons

Simple Icons

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

Usage

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

Where [ICON NAME] is replaced by the icon name, for example:

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

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:

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

console.log(simpleIcons.get('Simple Icons'));

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

Alternatively you can import the needed icons individually. This is useful if you are e.g. compiling your code with webpack and therefore have to be mindful of your package size:

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

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 ...'
}
*/

TypeScript Usage

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

$ npm install @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:

<?php

echo file_get_contents('path/to/package/icons/simple-icons.svg');

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

Third Party Extensions

WordPress

Icons are also available on WordPress through a simple plugin created by @tjtaylo, which you can find here.

Drupal

Icons are also availabe on Drupal through a module created by Phil Wolstenholme, which you can find here.

Kirby

Icons are also available on Kirby through a simple plugin created by @runxel, which you can find here.

React

Icons are also available on React through a simple package created by @wootsbot, which you can find here.

Status

Build Status npm version Packagist version

About

SVG icons for popular brands

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 46.7%
  • JavaScript 39.0%
  • CSS 14.3%