Free. Open source. Vector and pixel-perfect icons. The iconic font your product needs.

Installing EOS icons

There are several options for you to use EOS icons in your product:

Installing with npm

npm install eos-icons --save

With our CDN

For EOS set: https://cdn.jsdelivr.net/npm/eos-icons/dist/css/eos-icons.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/eos-icons/dist/css/eos-icons.css">

For Extended EOS set: https://cdn.jsdelivr.net/npm/eos-icons/dist/extended/css/eos-icons-extended.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/eos-icons/dist/extended/css/eos-icons-extended.css">

import them in your

<head>

tag as

link:css

and paste the link.

or Download EOS as a zip file

To download the zip file of

/dist

folder click here

Using EOS icons in your projects

Just like in any other iconic font, you need to add the Fonts and CSS files in your project:

1- Add the

eos-icons.css

file available under the dist/css folder into your projects

<head>

:

<link rel="stylesheet" href="assets/eos-icons.css">

2- Make sure the font files available in the

dist/fonts

folder are placed under your

assets/fonts

folder so the .css file can read them correctly.

3- Use the icons in your html as follows:

<i class="eos-icons">LIGATURE_OF_THE_ICON</i>

Where the LIGATURE_OF_THE_ICON is the name of the icon. Use our cheatsheet

to see the icon's name.

Using animated icons

The animated EOS icons are built using CSS animations. To implement them you don't need ligatures but classes instead.

For example:

<i class="eos-icons eos-icon-loading"></i>

See the other animated icons classes in our demo page. Click on the icon you want to use to see the code snippet.

EOS extended version with Material Design

Since EOS icons are designed following the Material Design guidelines and made to work together with Material Icons, we decided to include an extended version of EOS icons for easy implementation.

With the extended version you only need to use 1 class for all icons (EOS and Material Design). To implement it, you need to grab the

css/

and

font/

folders available at

dist/

extended, then add the

eos-icons-extended.css

under the

<head>

of your project accordingly.

For more information about Material Design Icons, please refer to the original MD icons repository where you can find the corresponding licensing and documentation.

Example of usage of the EOS extended

<!-- This is an EOS icon -->
<i class="eos-icons">action_chains</i>

<!-- This is a Material Design icon -->
<i class="eos-icons">bluetooth_disabled</i>

Our recommended sizes

Both MD icons and EOS icons have been designed to work and look perfect at: 18px, 24px, 36px, and 48px.

In order to be compliant, follow MD icons class names to size both MD icons and EOS icons:

Implementation examples

EOS icons is open source. Go to our Gitlab repository to find out more : https://gitlab.com/SUSE-UIUX/eos-icons