Restore icons page

site/assets/scss/_component-examples.scss

@@ -502,13 +502,13 @@
 // scss-docs-start icon-home
 .icon-home::before {
   display: inline-block;
-  width: 2rem;
-  height: 2rem;
+  width: 3rem;
+  height: 3rem;
   vertical-align: bottom;
   content: "";
   background-color: var(--bs-color-content-default);
   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>");
+  mask-image: escape-svg(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>"));
 }
 // scss-docs-end icon-home
 

site/content/docs/0.2/content/typography.md

@@ -76,7 +76,7 @@ All HTML headings, `<h1>` through `<h6>`, are available. Each class sets `font-s
 <p class="h6">h6. OUDS Web heading</p>
 {{< /example >}}
 
-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" >}}).
 
 <!-- OUDS mod: No customizing heading -->
 
@@ -182,7 +182,7 @@ Body medium is set by default on `:root` children but we don't set the `max-widt
 
 </details>
 
-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" >}}).
 
 ### Lead
 

site/content/docs/0.2/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 >}}
-<svg width="8em" height="8em" class="text-status-info" aria-hidden="true">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#info"/>
-</svg>
-<svg width="8em" height="8em" class="text-status-positive" aria-hidden="true">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#tick-confirmation"/>
-</svg>
-<svg width="8em" height="8em" class="text-status-warning" aria-hidden="true">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#important"/>
-</svg>
-<svg width="8em" height="8em" class="text-status-negative" aria-hidden="true">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#error-severe"/>
-</svg>
-{{< /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.
 
 <!-- ## Opacity -->
 

site/content/docs/0.2/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 >}}
 

site/data/sidebar.yml

@@ -215,7 +215,6 @@
   pages:
     - title: Approach
     - title: Icons
-      draft: true
 
 - title: About
   icon: globe2