simple-icons-font
v13.18.0
Published
Icon font generated from https://simpleicons.org
Downloads
4,691
Readme
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@v13/font/simple-icons.min.css" type="text/css">
Unpkg
<link rel="stylesheet" href="https://unpkg.com/simple-icons-font@v13/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.