Simple Icons

SVG icons for popular brands

Simple Icons

Simple Icons

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:



JavaScript

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



JavaScript

Node Usage

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

$ npm install simple<span class="token operator">-</span>icons
JavaScript

The API can then be used as follows:

<span class="token keyword">const</span> simpleIcons <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'simple-icons'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>simpleIcons<span class="token punctuation">[</span><span class="token string">'Simple Icons'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*
{
    title: 'Simple Icons',
    hex: '111111',
    source: 'https://simpleicons.org/',
    svg: '...'
}
*/</span>
JavaScript

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:

<span class="token keyword">const</span> icon <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'simple-icons/icons/simpleicons'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>icon<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*
{
    title: 'Simple Icons',
    hex: '111111',
    source: 'https://simpleicons.org/',
    svg: '...'
}
*/</span>
JavaScript

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares