` 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" >}}
+
+### Headings
+
+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 >}}
+
+
+
+
+
H1 with large icon
+
+
+
+
+
H1 with medium icon
+
+
+
+
+
H1 with small icon
+
+
+
+
+
+
H2 with large icon
+
+
+
+
+
H2 with medium icon
+
+
+
+
+
H2 with small icon
+
+
+
+
+
+
H3 with large icon
+
+
+
+
+
H3 with medium icon
+
+
+
+
+
H3 with small icon
+
+
+
+
+
+
H4 with large icon
+
+
+
+
+
H4 with medium icon
+
+
+
+
+
H4 with small icon
+
+
+
+
+
+
H5 with large icon
+
+
+
+
+
H5 with medium icon
+
+
+
+
+
H5 with small icon
+
+
+
+
+
+
H6 with lg icon
+
+
+
+
+
H6 with medium icon
+
+
+
+
+
H6 with small icon
+
+{{< /example >}}
+
+### Display headings
+
+You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
+
+### Regular texts
+
+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
+
+
+ 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%)
+
+
+
+
+
+
H1 with large icon and a very long title to see how it behaves while being wrapped
+
+{{< /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.
+
+
+
+
+
H1 with large icon and a very long title to see how it behaves while being wrapped
+
+{{< /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.
+
+
+
+
H1 with large icon
+
+
H1 with large icon
+
+{{< /example >}}
+
+## Icons accessibility
+
+{{< callout info >}}
+For more details, **Orange Accessibility Guidelines** provides [a deep-dive article regarding SVG accessibility](https://a11y-guidelines.orange.com/en/articles/accessible-svg/).
+{{< /callout >}}
+
+#### Decorative icons
+Purely **decorative icons** (like repeating information of an adjacent text) must be hidden to assistive technologies:
+- for `` or `` tags, use the attribute `aria-hidden="true"`
+- for `
+
+
+ Delete
+
+
+
+
+
+
+ Open settings
+
+
+
+
+
+
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 `` elements, and then insert an icon through a `` 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 `` of the page:
+
+{{< example lang="html" show_preview="false" >}}
+
+
+{{< /example >}}
+
+### SVG external image
+
+You can use SVG through an ``, the icon will fill the available space. Mask images can also be styled through CSS properties like `width` or `height`. Note that the `xmlns` attribute is required.
+
+{{< example class="mt-0" >}}
+` or even icon font wherever the icon is. Please make sure to either the rules described in this page or follow the design.
-
-Every icon class presented in here has the common following code:
-
-{{< scss-docs name="ouds-font-icon-common" file="scss/helpers/_icon.scss" >}}
-
-## Headings
-
-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` (32px) |
-| `.bl-md-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (28px) |
-| `.bl-sm-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (24px) |
-| `.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 >}}
-
-
-
-
-
H1 with large icon
-
-
-
-
-
H1 with medium icon
-
-
-
-
-
H1 with small icon
-
-
-
-
-
-
H2 with large icon
-
-
-
-
-
H2 with medium icon
-
-
-
-
-
H2 with small icon
-
-
-
-
-
-
H3 with large icon
-
-
-
-
-
H3 with medium icon
-
-
-
-
-
H3 with small icon
-
-
-
-
-
-
H4 with large icon
-
-
-
-
-
H4 with medium icon
-
-
-
-
-
H4 with small icon
-
-
-
-
-
-
H5 with large icon
-
-
-
-
-
H5 with medium icon
-
-
-
-
-
H5 with small icon
-
-
-
-
-
-
H6 with lg icon
-
-
-
-
-
H6 with medium icon
-
-
-
-
-
H6 with small icon
-
-{{< /example >}}
-
-## Display headings
-
-You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
-
-## Regular texts
-
-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` (32px) |
-| `.bl-md-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (28px) |
-| `.bl-sm-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (24px) |
-| `.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
-
-
- 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%)
-
-
-
-
-
-
H1 with large icon and a very long title to see how it behaves while being wrapped
-
-{{< /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.
-
-
-
-
-
H1 with large icon and a very long title to see how it behaves while being wrapped
-
-{{< /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.
-
-
-
-
H1 with large icon
-
-
H1 with large icon
-
-{{< /example >}}
-
-## CSS
-
-### Variables
-
-{{< scss-docs name="root-size-scaled-var-ouds" file="scss/_root.scss" >}}
-
-### Sass tokens
-
-#### Raw tokens
-
-Dimension raw tokens as Sass variables. **Not to be used as-is**.
-
-{{< scss-docs name="ouds-raw-dimension" file="scss/tokens/_raw.scss" >}}
-
-#### Semantic tokens
-
-Size semantic tokens are defined as Sass variables.
-
-{{< scss-docs name="ouds-semantic-size" file="scss/tokens/_semantic.scss" >}}
diff --git a/site/content/docs/0.3/utilities/colors.md b/site/content/docs/0.3/utilities/colors.md
index ea32fd1d14..643bb22fc2 100644
--- a/site/content/docs/0.3/utilities/colors.md
+++ b/site/content/docs/0.3/utilities/colors.md
@@ -97,33 +97,7 @@ In the following table we assume that the context is switching between light and
### On icons
-The following color utilities are meant to be used only with icons and not with text.
-
-{{< example >}}
-
-
-
-
-
-
-
-
-{{< /example >}}
-
-Here are [the normal contexts of use of these text color utilities](https://unified-design-system.orange.com/472794e18/p/217ac6-colour/t/9b95834c2e).
-
-{{< bs-table >}}
-| Color utility | Context of use |
-| --- | --- |
-| `.text-status-info` | Use to communicate a feedback. It's more important than a neutral color. |
-| `.text-status-positive` | Use to communicate a positive action, a confirmation or a positive feedback. |
-| `.text-status-warning` | Use to display an information that requires more attention, or an action from the user. |
-| `.text-status-negative` | Use to communicate something negative. It can be a destructive action, an error state, or a negative feedback. |
-{{< /bs-table >}}
+See [icons documentation]({{< docsref "/extend/icons/#icons-color" >}}) to learn how to use color utilities on icons.
diff --git a/site/content/docs/0.3/utilities/text.md b/site/content/docs/0.3/utilities/text.md
index a9ff5aa546..959db0cd60 100644
--- a/site/content/docs/0.3/utilities/text.md
+++ b/site/content/docs/0.3/utilities/text.md
@@ -143,7 +143,7 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
Customize your available `font-size`s by modifying the `$ouds-font-sizes` Sass map.
-You can easily add an icon with your font reference using [our icon helper]({{< docsref "/helpers/icon" >}}).
+You can easily add an icon with your font reference using [our icon size utilities]({{< docsref "/extend/icons#icons-size" >}}).
{{< bootstrap-compatibility >}}
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index b0757e62ba..1451669d77 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -172,7 +172,6 @@
- title: Colored links
- title: Focus ring
draft: true
- - title: Icon
- title: Position
- title: Ratio
- title: Stacks
@@ -212,7 +211,6 @@
pages:
- title: Approach
- title: Icons
- draft: true
- title: About
icon: globe2
diff --git a/site/static/docs/0.3/assets/img/heart-recommend.svg b/site/static/docs/0.3/assets/img/heart-recommend.svg
new file mode 100644
index 0000000000..8806bde573
--- /dev/null
+++ b/site/static/docs/0.3/assets/img/heart-recommend.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/site/static/docs/0.3/assets/img/ouds-web-sprite.svg b/site/static/docs/0.3/assets/img/ouds-web-sprite.svg
index 9a47e5f235..9cb4aa492d 100644
--- a/site/static/docs/0.3/assets/img/ouds-web-sprite.svg
+++ b/site/static/docs/0.3/assets/img/ouds-web-sprite.svg
@@ -1,29 +1,35 @@
-
+
-
+
-
+
-
+
-
+
-
-
+
-
-
+
-
-
+
-
-
+
+
+
+
+