| layout | title | description | group | aliases | toc | |
|---|---|---|---|---|---|---|
docs |
Icons |
Guidance and suggestions for using Solaris icons library with OUDS Web. |
extend |
|
true |
{{< callout info >}} You can find here the Iconography design guidelines. {{< /callout >}}
While OUDS Web 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]({{< param icons >}}) is a growing library of icons that are designed by OUDS 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. They are not open-source though and should only be used for Orange projects. Please refer to the [icons license file]({{< param icons_license >}}) for legal information.
If you need guidance to use Solaris icons, please refer to the paragraph [use Solaris icons]({{< docsref "extend/icons#use-solaris-icons" >}}).
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.
To color icons, you can:
- use [color utilities classes]({{< docsref "utilities/colors#colors" >}}) like
.text-brand-primary,.text-disabledor.text-status-positivethat change current color value. - specify a color using CSS variables like
--bs-color-content-brand-primary,--bs-color-content-disabled"or--bs-color-content-status-positive".
For SVGs (SVG sprites, inline SVGs or CSS background SVGs), the fill="currentColor" attribute is required on the <svg> or <symbol> tag, if you want to change the icons color on the fly: it will make the icon inherit color from itself or its parent containers. It is set on the icons downloaded from Solaris icons finder.
The following color utilities and CSS variables are intended for use only with functional icons, not with text, and icons should not be used on their own, but only alongside text, as functional colors do not provide sufficient contrast to ensure readability.
Here are the normal contexts of use of these functional colors.
{{< bs-table >}}
| Color utility | Color CSS variable | Context of use |
|---|---|---|
.text-status-info |
--bs-color-content-status-info |
Use to communicate a feedback. It's more important than a neutral color. |
.text-status-positive |
--bs-color-content-status-positive |
Use to communicate a positive action, a confirmation or a positive feedback. |
.text-status-warning |
--bs-color-content-status-warning |
Use to display an information that requires more attention, or an action from the user. |
.text-status-negative |
--bs-color-content-status-negative |
Use to communicate something negative. It can be a destructive action, an error state, or a negative feedback. |
| {{< /bs-table >}} |
{{< example >}}
Info
Success
Warning
Danger
Info
Success
Warning
Danger
Here are some examples of other [color utilities]({{< docsref "utilities/colors#colors" >}}) and CSS variables used with icons.
{{< example class="d-inline-flex flex-column">}}
{{< /example >}}
Icons' size depend on where they are placed in the page content, so please make sure to either use our utilities provided in this page or follow the design. Icons size utility classes are done to be used upon <img>, <svg> or even icon font wherever the icon is.
Every icon size utility class presented in here has the common following code:
{{< scss-docs name="ouds-font-icon-common" file="scss/helpers/_icon.scss" >}}
Here are the rules to follow for headings. These icons' sizes are responsive.
See the sizes associated to classes
{{< bs-table >}}
| Icon class | Values from 2xs to sm |
Values from md to lg |
Values for xl and upper |
|---|---|---|---|
.hxl-lg-icon |
3.25rem (52px) |
4rem (64px) |
4rem (64px) |
.hxl-md-icon |
3rem (48px) |
3.5rem (56px) |
3.75rem (60px) |
.hxl-sm-icon |
2.75rem (44px) |
3.25rem (52px) |
3.5rem (56px) |
.hl-lg-icon |
3rem (48px) |
3.25rem (52px) |
3.5rem (56px) |
.hl-md-icon |
2.75rem (44px) |
3rem (48px) |
3.25rem (52px) |
.hl-sm-icon |
2.5rem (40px) |
2.75rem (44px) |
3rem (48px) |
.hm-lg-icon |
2.75rem (44px) |
3rem (48px) |
3.25rem (52px) |
.hm-md-icon |
2.5rem (40px) |
2.75rem (44px) |
3rem (48px) |
.hm-sm-icon |
2rem (32px) |
2.5rem (40px) |
2.75rem (44px) |
.hs-lg-icon |
2.75rem (44px) |
2.75rem (44px) |
3rem (48px) |
.hs-md-icon |
2.5rem (40px) |
2.5rem (40px) |
2.75rem (44px) |
.hs-sm-icon |
2rem (32px) |
2rem (32px) |
2.5rem (40px) |
.bl-lg-icon |
1.75rem (28px) |
1.75rem (28px) |
2.75rem (44px) |
.bl-md-icon |
1.5rem (24px) |
1.5rem (24px) |
2.5rem (40px) |
.bl-sm-icon |
1.25rem (20px) |
1.25rem (20px) |
2rem (32px) |
.bm-lg-icon |
1.5rem (24px) |
1.5rem (24px) |
1.75rem (28px) |
.bm-md-icon |
1.25rem (20px) |
1.25rem (20px) |
1.5rem (24px) |
.bm-sm-icon |
1rem (16px) |
1rem (16px) |
1.25rem (20px) |
| {{< /bs-table >}} |
{{< example >}}
{{< /example >}}
You should not use any icon with our .display-* font sizes, because we prefer to keep the place for the text.
Here are the rules to follow for regular texts. These icons' sizes are responsive.
See the sizes associated to classes
{{< bs-table >}}
| Icon class | Values from 2xs to sm |
Values from md to lg |
Values for xl and upper |
|---|---|---|---|
.bl-lg-icon |
1.75rem (28px) |
1.75rem (28px) |
2.75rem (44px) |
.bl-md-icon |
1.5rem (24px) |
1.5rem (24px) |
2.5rem (40px) |
.bl-sm-icon |
1.25rem (20px) |
1.25rem (20px) |
2rem (32px) |
.bm-lg-icon |
1.5rem (24px) |
1.5rem (24px) |
1.75rem (28px) |
.bm-md-icon |
1.25rem (20px) |
1.25rem (20px) |
1.5rem (24px) |
.bm-sm-icon |
1rem (16px) |
1rem (16px) |
1.25rem (20px) |
.bs-lg-icon |
1.25rem (20px) |
1.25rem (20px) |
1.5rem (24px) |
.bs-md-icon |
1rem (16px) |
1rem (16px) |
1.25rem (20px) |
.bs-sm-icon |
.75rem (12px) |
.75rem (12px) |
1rem (16px) |
| {{< /bs-table >}} |
{{< example >}}
Lead paragraph with large icon
Lead paragraph with medium icon
Lead paragraph with small icon
Default paragraph with large icon
Default paragraph with medium icon
Default paragraph with small icon
Small paragraph with large icon
Small paragraph with medium icon
Small paragraph with small icon
Here are the rules to follow for decorative icons. Be careful using these icons' sizes because they are not responsive. Check out for [more information about accessibility in our documentation]({{< docsref "/extend/icons#icons-accessibility" >}}).
See the sizes associated to classes
{{< bs-table >}}
| Icon class | Value |
|---|---|
.decorative-2xs-icon |
1rem (16px) |
.decorative-xs-icon |
1.5rem (24px) |
.decorative-sm-icon |
2rem (32px) |
.decorative-md-icon |
2.5rem (40px) |
.decorative-lg-icon |
3rem (48px) |
.decorative-xl-icon |
3.5rem (56px) |
.decorative-2xl-icon |
4.5rem (72px) |
| {{< /bs-table >}} |
2x-small decorative icon
coreGlobalDimension200 (1rem or 16px at zoom 100%)
X-small decorative icon
coreGlobalDimension300 (1.5rem or 24px at zoom 100%)
Small decorative icon
coreGlobalDimension400 (2rem or 32px at zoom 100%)
Medium decorative icon
coreGlobalDimension500 (2.5rem or 40px at zoom 100%)
Large decorative icon
coreGlobalDimension600 (3rem or 48px at zoom 100%)
X-large decorative icon
coreGlobalDimension700 (3.5rem or 56px at zoom 100%)
2x-large decorative icon
coreGlobalDimension900 (4.5rem or 72px at zoom 100%)
<svg class="decorative-2xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-sm-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-md-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-lg-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
<svg class="decorative-2xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases. We've set arbitrary spacings, but align them with your design.
This is the default behavior of our DOM.
{{< example >}}
{{< /example >}}{{< example >}}
Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.
You can also have the icon above the text block.
{{< example >}}
{{< /example >}}{{< example >}}
Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.
SVG Sprite is the preferred choice for flexibility, performance and accessibility, and this is why all our examples use this method but there are other ways to display icons. They should all behave the same thanks to our CSS. If you are experimenting any trouble, feel free to search or fill in a new Github discussion or contact [our team]({{< docsref "/about/team" >}}).
{{< example >}}
{{< /example >}}
{{< callout info >}} For more details, Orange Accessibility Guidelines provides a deep-dive article regarding SVG accessibility. {{< /callout >}}
Purely decorative icons (like repeating information of an adjacent text) must be hidden to assistive technologies:
- for
<svg>or<span>tags, use the attributearia-hidden="true" - for
<img>, use an emptyaltattribute - CSS background images are intended to be decorative
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.
{{< example class="mt-0" >}} Delete Open settings
Parameters
{{< /example >}}
There are many ways to use Solaris icons in a web page:
- Bundled, if you have several icons in your project:
- [SVG sprite]({{< docsref "extend/icons#svg-sprite" >}}) (preferred choice for flexibility, performance and accessibility)
- [Web font]({{< docsref "extend/icons#web-font" >}})
- Individually, if you have only few icons to render:
- [Inline SVG]({{< docsref "extend/icons#inline-svg" >}})
- [SVG external image]({{< docsref "extend/icons#svg-external-image" >}})
- [CSS background SVG]({{< docsref "extend/icons#css-background-svg" >}})
All icons can be retrieved easily in any of these formats in the Solaris icons finder. See Solaris icons library [develop documentation]({{< param icons_develop >}}) for complete development guidelines for the different formats, and their pros and cons.
This technique is the preferred choice for flexibility, performance and accessibility.
Using the [Solaris icons finder]({{< param icons >}}), you can generate an SVG sprite, a single SVG file containing all your icons in <symbol> elements, and then insert an icon through a <use> element. With SVG sprites, you can benefit of the power of currentColor for easy coloring and theming.
SVG sprite file example:
{{< example lang="svg" show_preview="false" >}} {{< /example >}}
SVG sprite usage:
{{< example >}} {{< /example >}}
To speed up loading, the SVG sprite file can be preloaded in the <head> of the page:
{{< example lang="html" show_preview="false" >}}
{{< /example >}}Web font is not the preferred solution. 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]({{< param icons >}}), 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. please keep in mind that adding or removing icons from the font afterward can be complicated.
{{< example >}} {{< /example >}}
This technique should only be used if you have few icons to render, and if they are 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 coloring and theming.
{{< example class="mt-0" >}} {{< /example >}}
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, so it won't be documented here.
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-element.
You can use the SVG code within your CSS (be sure to escape any characters with [our internal escape-svg() function]({{< docsref "/customize/sass" >}}#escape-svg)). When no dimensions are specified via width and height on the <svg>, the icon will fill the available space. CSS background SVGs can be styled through CSS properties like width, height or background-color. Note that the xmlns attribute is required.
{{< example class="mt-0" >}} {{< /example >}}
Using:
{{< scss-docs name="icon-home" file="site/assets/scss/_component-examples.scss" >}}