simple-icons-font

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

:information_source: 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:

JSDelivr

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

Unpkg

<link rel="stylesheet" href="https://unpkg.com/simple-icons-font@v14/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.

Custom Builds

You can specify which icons need to be build for a smaller file size.

1. Clone and install dependencies:

git clone [e-mail]:simple-icons/simple-icons-font.git
cd simple-icons-font
npm install

1. Use the environment variable SI_FONT_SLUGS_FILTER to filter icons to include:

SI_FONT_SLUGS_FILTER=github,simpleicons npm run build

Next environment variables are available to customize the build:

• SI_FONT_SLUGS_FILTER: Comma separated string of slugs to include in the build. See all slugs.
• SI_FONT_PRESERVE_UNICODES: By default, the build will retain the same unicode of an icon as the full build. You can set it to false to disable this.

For example, if you set SI_FONT_PRESERVE_UNICODES to false, the unicode will still start at 0xea01 and keep increasing even you skipped some icons:

SI_FONT_SLUGS_FILTER=github,simpleicons SI_FONT_PRESERVE_UNICODES=false npm run build
#=> github      \u{EA01}
#=> simpleicons \u{EA02}