mondeja / simple-icons-font

SVG icon font for popular brands https://simpleicons.org

Simple Icons: Icon font

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

Setup

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

CDN Setup

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

JSDeliver

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons-font@v5/font/simple-icons.min.css" type="text/css">

Unpkg

<link rel="stylesheet" href="https://unpkg.com/simple-icons-font@v5/font/simple-icons.min.css" type="text/css">

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 may cause an icon to disappear if it has been removed in the latest version.

Node Setup

The font is also available through our npm package. To install, simply run:

npm install simple-icons-font

After installation, the icons font and stylesheet font can be found in node_modules/simple-icons-font/font. You can use your favorite bundling tool to include them into your project.

PHP Setup

The font is also available through our Packagist package. To install, simply run:

composer require simple-icons/simple-icons-font

The font can then be used by linking to the stylesheet in your HTML or PHP file (see example in Manual Setup).

Manual Setup

You can also download the latest version of the package and copy the content of the font folder into your project. Then, reference the CSS file using a link tag in your HTML:

<link rel="stylesheet" href="/path/to/simple-icons.min.css" type="text/css">

Usage

Use any of the icons available in simple-icons by adding the following classes to a node in your HTML. Use the si--color class to apply the brand's color to the icon.

<i class="si si-[ICON NAME]"></i>
<i class="si si-[ICON NAME] si--color"></i>

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

<i class="si si-simpleicons"></i>
<i class="si si-simpleicons si--color"></i>

In this example we use the <i> tag, but any inline HTML tag should work as you expect.