EOS Icons

Installing EOS icons

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

Installing the npm open_in_new

npm install eos-icons --save

Using the CDN open_in_new

Default theme (filled):

https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/eos-icons.css

Outline theme:

https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/eos-icons-outlined.css

Add one of the following lines in your <head> tag as link:css according to which theme you want to import:

Default theme

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

Outlined theme

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

Installing the Ruby gem open_in_new

gem install eos-icons-font

Add the following directive to your application:*= require eos-icons-font

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 or eos-icons-outlined.css file available under the dist/css folder into your project's <head>.
(*) If you're using the CDN, you can skip this step.

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

<link rel='stylesheet' href='eos-icons-outlined.css'/>

2- Make sure the fonts folder available at dist/fonts is placed at the same location as your eos-icons.css file so the fonts can be read correctly.
(*) If you're using the CDN, you can skip this step.

- index.html
- eos-icons.css
- fonts/...

3- Use the icons in your html as follows:

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

or for outlined icons

<i class='eos-icons-outlined'>LIGATURE_OF_THE_ICON</i>

Where the LIGATURE_OF_THE_ICON is the name of the icon. Go to the home page to see the all icons' names.

Using Animated icons

The animated EOS icons are built using SMIL SVG animations. To implement them you don't need anything special, just an img tag with the src to the svg. For example:

<img src='loading'/>

Head to the home page to download animated icons. Click on the icon you want to use to see the code snippet.

Our recommended sizes

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

Implementation Examples

miscellaneousmiscellaneousmiscellaneousmiscellaneous

<i class='eos-icons eos-18'>miscellaneous</i>
  <i class='eos-icons eos-24'>miscellaneous</i>
  <i class='eos-icons eos-36'>miscellaneous</i>
  <i class='eos-icons eos-48'>miscellaneous</i>

SCSS code snippet

/* size variables */
  $eos-18: 18px;
  $eos-24: 24px;
  $eos-36: 36px;
  $eos-48: 48px;

  /* Rules for sizing the icon. */
  .eos-18 { font-size: $eos-18; }
  .eos-24 { font-size: $eos-24; }
  .eos-36 { font-size: $eos-36; }
  .eos-48 { font-size: $eos-48; }

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

EOS Icons uses cookies to help us learn more about how we can improve our product.
Learn more about our cookie policy

Edit preferences

Get EOS ICONS