Components - Icons

Import a font icon library - Remix Icon

https://remixicon.com - Simply Delightful Icon System

Install guide:

  • Copy the CSS into your portal theme (in backoffice -> look & feel -> theme -> stylesheet, en Français : Backoffice -> Apparence -> Thème -> Feuille de style)
  • Make live (save and apply your theme)
  • Finally, simply use icons into your pages

Usage:

In your HTML, on i tag, set the class to ri- followed by the name of the icon. For example, for the alarm-fill and alarm-line icons, try:

  • <i class="ri-alarm-fill"></i>
  • <i class="ri-alarm-line" style="font-size: 2rem; color: cornflowerblue;"></i>

Note: Attribution is required by Remix Icon license. The provided CSS contains embedded comments with necessary attribution. While using this code normally, you shouldn’t need to do anything additional to provide attribution.

Import a font icon library - IcoFont

IcoFont.com - 2100+ free icons to spice up your creative designs

Install guide:

  • Copy the CSS into your portal theme (in backoffice -> look & feel -> theme -> stylesheet, en Français : Backoffice -> Apparence -> Thème -> Feuille de style)
  • Make live (save and apply your theme)
  • Finally, simply use icons into your pages

Usage:

In your HTML, on i tag, set the class to icofont- followed by the name of the icon. For example, for the alarm icon, try:

  • <i class="icofont-alarm"></i>
  • <i class="icofont-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

Note: Attribution is required by IcoFont licenses. The provided CSS contains embedded comments with necessary attribution. While using this code normally, you shouldn’t need to do anything additional to provide attribution.

Import a font icon library - Bootsrap icons

Bootstrap Icons - Free, high quality, open source icon library with over 1,300 icons.

Install guide:

  • Copy the CSS into your portal theme (in backoffice -> look & feel -> theme -> stylesheet, En Français : Backoffice -> Apparence -> Thème -> Feuille de style)
  • Make live (save and apply your theme)
  • Finally, simply use icons into your pages

Usage:

In your HTML, on i tag, set the class to bi- followed by the name of the icon. For example, for the alarm icon, try:

  • <i class="bi-alarm"></i>
  • <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

Inline SVG directly in your HTML

A non-exhaustive list of SVG icon libraries free to use :

Usage for Remix Icon and Boostrap icons:

As Bootstrap and Remix propose to copy to clipboard the SVG code directly from the interface, you just need to choose your icon, click on the “Copy to clipboard” button for Boostrap, or “Copy SVG” for Remix. You are then ready to go.

Usage for Google icons, Feather icons and others:

  • Get the desired SVG icon, download it on your computer
  • Open it with a text editor
  • Copy the code
  • Paste it wherever you want in your HTML

Pros: Inlining SVG is optimal is you use few icons in your pages, and therefore you will only load what is really necessary (you won’t load an heavy icon font to only use 0.1% of it)

Pros: You take benefit of SVG format in general: better scaling, better accessibility possibilities, can handle complex and even multicolor icons.

Cons: Sizing and positioning can require more advanced CSS skills than simple icon fonts that behave like text characters.

Cons: Reusing several times the same icon will be tedious as you’ll need to duplicate the SVG code several times. In that case, see the next example for SVG Sprites

Optimal solution with SVG Sprites

Disclaimer:

Technically speaking, it’s the optimal solution, but beware (as the must is the enemy of the good), it’s also the most complex and technical. We recommend this solution for external usage, when the project must handle an important traffic, and therefore when performance is a key criteria.

Principle:

You will constitute an SVG Sprite, that contains all the required SVGs of your page. It’s a kind of collection of symbols. Each symbol as an ID, and can be used by referencing this ID.

In this example:

  • a sprite (collection) of 2 icons is declared in the HTML
  • each icon has a viewport, but don’t necessarily have a size
  • then, in my page, I can “load” the desired icon by using the symbol ID with a <use> tag and a hrel attribute.
  • on each svg/use tag I can set a specific style, to change the size, the stroke color etc…
  • I can also apply (with CSS) a transform property, to rotate or even animate my icons.

Pros: Optimal, lightweight, custom made

Cons: Complex to create and use, require advanced CSS and SVG skills