View on GitHub

Icons

Guidance and suggestions for using Solaris icons library with Boosted.

On this page

While Boosted doesn’t include an icon set by default, Orange does have its own comprehensive icon library called Solaris. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.

Solaris icons library is a growing library of icons that are designed by Orange Design System design team. It features an icon search tool based on categories and keywords, and allows icons to be downloaded in various formats for use in design and development. Please refer to the Solaris icons library usage documentation for full design and development guidelines.

They are not open-source though and should only be used for Orange projects. Please refer to the icons license file for legal information.

Icons rendering

Icons are designed within a square layout to preserve consistency. Within this square, there exists a designated safety zone to guarantee that icons can be used in various sizes and contexts while maintaining alignment as intended by the designers. The dimensions of the icons encompass this safety zone, ensuring adaptability and consistency across diverse applications.

Use Solaris icons

There are many ways to use Solaris icons in a web page:

See Solaris icons library development documentation for complete information about the different formats and their pros and cons.

All icons can be retrieved easily in any of these formats in the Solaris icons finder, except for the specific case of warning icon which can be copied below.

SVG sprite

This technique is the preferred choice for flexibility, performance and accessibility.

Using the Solaris icons finder, you can generate an SVG sprite—a single SVG file containing all your icons—and insert an icon through the <use> element. This is similar to an <img> element, but with the power of currentColor for easy theming: see in this example how some icons inherit their color from the parent’s light or dark theme, whereas some others get their color from text Orange’s colors utilities or local style.

html 
<p class="p-2" data-bs-theme="light">
  <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#settings"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#settings"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-body-tertiary" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#trash"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#info"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#warning-important-accessible"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#error-severe"/>
  </svg>
</p>
<p class="p-2" data-bs-theme="dark">
  <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#settings"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#settings"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-body-tertiary" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#trash"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#info"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#warning-important-accessible"/>
  </svg>
  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#error-severe"/>
  </svg>
</p>

To speed up loading, the sprite file can be preloaded in the <head> of the page:

<link rel="preload" href="/path/to/your/sprite.svg" as="image" type="image/svg+xml">

Web font

Web font is not the preferred solution. Since it’s not used in Boosted, it won’t be documented here. However, for websites needing more than 20 icons, you may consider using a Web font instead of an SVG sprite.

Using the Solaris icons finder, you can generate a Web font containing all your icons and use it like a classic font. Web font icons can be styled through CSS properties like font-size and color.

Note that with this technique, you cannot have multicolor icons, so you cannot render the warning icon.

Inline SVG

This technique should only be used if you have few icons to render, and if this icon is used only once in your website.

You can embed your icons directly within the HTML of your page (as opposed to an external image file). This way to use SVGs can benefit of the power of currentColor for easy theming.

html 
<svg fill="currentColor" width="2em" height="2em" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
  <path d="M656.7 422.409a229.96 229.96 0 0 1-315.39.008A224.95 224.95 0 0 0 224.064 615H224v210a100 100 0 0 0 100 100h450V620a224.94 224.94 0 0 0-117.3-197.591M679 255A180 180 0 1 1 499 75a180 180 0 0 1 180 180" style="fill-rule:evenodd"/>
</svg>

The fill="currentColor" attribute is required if you want to change the icons color on the fly, and that the foreground color changes in dark/light mode.

SVG external image

You can use it when:

  • you only have few icons to render
  • you don’t need to change the icons colors. For that reason, we do not recommend to use that technique, and it won’t be documented here.

CSS background SVG

CSS background icons should be used when you can’t or don’t want to refer to an external image, or if you want to include the icon in a CSS ::before or ::after pseudo-elements.

You can use the SVG code within your CSS (be sure to escape any characters with our internal escape-svg() function).

When no dimensions are specified via width and height on the <svg>, the icon will fill the available space. Note that the xmlns attribute is required.

html 
<span class="icon-home"></span>

Using:

site/assets/scss/_component-examples.scss 
.icon-home::before {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: bottom;
  content: "";
  background-color: var(--bs-body-color);
  background-size: contain;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M553.478 147.416v.017a74.956 74.956 0 0 0-107.08.13v-.021L100 500h150v300a75 75 0 0 0 75 75h350a75 75 0 0 0 75-75V500h150ZM580 537.52V755H362.5a37.5 37.5 0 0 1-37.5-37.5V500h217.5a37.5 37.5 0 0 1 37.5 37.5v.02Z'/></svg>");
}

Modify icons color

For SVGs, we recommend setting fill="currentColor" on the <svg> tag: it will make the icon inherit color from itself or its parent containers.

Then, you can:

  • use text color utilities classes like .text-success that change current color value
  • specify a color using CSS variables like style="color: var(--bs-success)"

Icons accessibility

For more details, Orange Accessibility Guidelines provides a deep-dive article regarding SVG accessibility.

Decorative icons

Purely decorative icons (like repeating information of an adjacent text) must be hidden to assistive technologies:

  • for <svg> tag, use the attributes aria-hidden="true" and focusable="false"
  • for <span> tag, use the attribute aria-hidden="true"
  • for <img>, use an empty alt attribute
  • CSS background images are intended to be decorative

Informative/meaningful icons

If the icon is meaningful, e.g. only content of a button, you have to provide an appropriate alternative text: for example, the description of the icon or the description of the action triggered. The best way to do this is to keep the icon hidden to assistive technologies (see above) and add a visually hidden label (which will be perceived by assistive technologies) by using the .visually-hidden class. For external images, you can also fill the alt attribute directly.

Warning
html 
<button type="button" class="btn btn-icon btn-outline-secondary">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
    <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#settings"/>
  </svg>
  <span class="visually-hidden">Open settings</span>
</button>
<img src="/docs/5.3/assets/img/boosted-warning.svg" alt="Warning" width="32" height="32">

Warning icon

For accessibility reasons, the warning icon, which should always be used with functional yellow, has a black exclamation point inside, regardless of the background color. It can be colored with .text-warning class.

SVG sprite

SVG symbol to insert into your SVG sprite:

<symbol fill="currentColor" viewBox="0 0 1000 1000" id="warning-important-accessible">
  <path d="M500.497 125a93.94 93.94 0 0 1 81.09 46.517l328.62 562.5-.008.005a93.709 93.709 0 0 1-81.09 140.983H171.887a93.71 93.71 0 0 1-81.09-140.983l.765-1.326.036-.062 327.8-561.117C436.254 142.707 467.122 125 500.497 125Z"/>
  <path fill="#000" d="M501.507 680.005c-26.233-.002-47.5 21.262-47.502 47.495s21.26 47.5 47.493 47.505a47.5 47.5 0 0 0 47.507-47.5c0-26.233-21.265-47.5-47.498-47.5m-.01-380.007c-26.238 0-47.507 21.27-47.507 47.507 0 .967.037 1.918.094 2.867l15.74 258.716.004.52c.288 17.092 14.355 23.53 31.667 23.53 17.486 0 31.662-6.568 31.67-24.05l15.7-258.121.057-.86a44 44 0 0 0 .082-2.602c0-26.238-21.27-47.507-47.507-47.507"/>
</symbol>

Then use it like this:

html 
<svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
  <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#warning-important-accessible"/>
</svg>

Web font

Please note that this icon cannot be used in a Web font, due to its two colors.

Inline SVG

SVG code for an inline SVG:

html 
<svg fill="currentColor" width="1.875em" height="1.875em" class="solaris-icon text-warning" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
  <path d="M500.497 125a93.94 93.94 0 0 1 81.09 46.517l328.62 562.5-.008.005a93.709 93.709 0 0 1-81.09 140.983H171.887a93.71 93.71 0 0 1-81.09-140.983l.765-1.326.036-.062 327.8-561.117C436.254 142.707 467.122 125 500.497 125Z"/>
  <path fill="#000" d="M501.507 680.005c-26.233-.002-47.5 21.262-47.502 47.495s21.26 47.5 47.493 47.505a47.5 47.5 0 0 0 47.507-47.5c0-26.233-21.265-47.5-47.498-47.5m-.01-380.007c-26.238 0-47.507 21.27-47.507 47.507 0 .967.037 1.918.094 2.867l15.74 258.716.004.52c.288 17.092 14.355 23.53 31.667 23.53 17.486 0 31.662-6.568 31.67-24.05l15.7-258.121.057-.86a44 44 0 0 0 .082-2.602c0-26.238-21.27-47.507-47.507-47.507"/>
</svg>

SVG external image

Code to copy in an external SVG file:

<svg xmlns='http://www.w3.org/2000/svg' fill="currentColor" viewBox="0 0 1000 1000">
  <path fill="#fc0" d="M500.497 125a93.94 93.94 0 0 1 81.09 46.517l328.62 562.5-.008.005a93.709 93.709 0 0 1-81.09 140.983H171.887a93.71 93.71 0 0 1-81.09-140.983l.765-1.326.036-.062 327.8-561.117C436.254 142.707 467.122 125 500.497 125Z"/>
  <path fill="#000" d="M501.507 680.005c-26.233-.002-47.5 21.262-47.502 47.495s21.26 47.5 47.493 47.505a47.5 47.5 0 0 0 47.507-47.5c0-26.233-21.265-47.5-47.498-47.5m-.01-380.007c-26.238 0-47.507 21.27-47.507 47.507 0 .967.037 1.918.094 2.867l15.74 258.716.004.52c.288 17.092 14.355 23.53 31.667 23.53 17.486 0 31.662-6.568 31.67-24.05l15.7-258.121.057-.86a44 44 0 0 0 .082-2.602c0-26.238-21.27-47.507-47.507-47.507"/>
</svg>

Then use it like this:

html 
<img src="/docs/5.3/assets/img/boosted-warning.svg" alt="" width="32" height="32">

CSS background SVG

CSS code for background SVG image:

html 
<span class="icon-warning"></span>

Using:

site/assets/scss/_component-examples.scss 
.icon-warning::after {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: bottom;
  content: "";
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path fill='%23fc0' d='M500.497 125a93.94 93.94 0 0 1 81.09 46.517l328.62 562.5-.008.005a93.709 93.709 0 0 1-81.09 140.983H171.887a93.71 93.71 0 0 1-81.09-140.983l.765-1.326.036-.062 327.8-561.117C436.254 142.707 467.122 125 500.497 125Z'/><path d='M501.507 680.005c-26.233-.002-47.5 21.262-47.502 47.495s21.26 47.5 47.493 47.505a47.5 47.5 0 0 0 47.507-47.5c0-26.233-21.265-47.5-47.498-47.5m-.01-380.007c-26.238 0-47.507 21.27-47.507 47.507 0 .967.037 1.918.094 2.867l15.74 258.716.004.52c.288 17.092 14.355 23.53 31.667 23.53 17.486 0 31.662-6.568 31.67-24.05l15.7-258.121.057-.86a44 44 0 0 0 .082-2.602c0-26.238-21.27-47.507-47.507-47.507' fill='%23000'/></svg>");
  background-size: contain;
}