From 33d0ff0992dcc2b769199356f31d6e7a0b0bc8ae Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 29 Mar 2023 10:24:37 +0200
Subject: [PATCH 01/39] Change icons in Boosted-sprite with real Solaris icons

---
 site/content/docs/5.3/components/tooltips.md  |  4 +-
 site/layouts/shortcodes/orange-footer.html    |  8 +--
 .../docs/5.3/assets/img/boosted-sprite.svg    | 71 +++++++++----------
 3 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index f6a79455d3..26f5affc90 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -129,7 +129,7 @@ With an SVG:
 
   <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
     <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
     </svg>
     <span class="visually-hidden">Helper</span>
   </button>
@@ -145,7 +145,7 @@ With an SVG:
 
 <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
   <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
   </svg>
   <span class="visually-hidden">Helper</span>
 </button>
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
index 42888b9f6d..7de8d445d4 100644
--- a/site/layouts/shortcodes/orange-footer.html
+++ b/site/layouts/shortcodes/orange-footer.html
@@ -152,10 +152,10 @@ <h3 class="accordion-header footer-heading" id="headingFour{{ $id }}">
 {{- if $service }}
   <div class="container-xxl footer-service">
     <ul class="navbar-nav gap-3 gap-md-4">
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#locate"/></svg><span>Store locator</span></a></li>
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#coverage"/></svg><span>Coverage checker</span></a></li>
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#contact"/></svg><span>Contact us</span></a></li>
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#protection"/></svg><span>Child protection</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#location-pin-compass"/></svg><span>Store locator</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#mobile-network-coverage"/></svg><span>Coverage checker</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#live-chat"/></svg><span>Contact us</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#child-protection"/></svg><span>Child protection</span></a></li>
     </ul>
   </div>
 {{- if $mandatory }}
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index f703927469..33be6861a4 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -1,56 +1,53 @@
 <svg xmlns="http://www.w3.org/2000/svg">
-  <symbol fill="currentColor" viewBox="0 0 125 125" id="success">
-    <path d="M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 01-1.3 3.7L57.7 86a5.8 5.8 0 01-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 011.7-4.1l2.3-2.4a5.8 5.8 0 014.2-1.7 5.8 5.8 0 013.8 1.4L52 64.7 86.6 31a5.8 5.8 0 014-1.6z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="success">
+    <path d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm5.33 6.36-6.112 7.68a.951.951 0 0 1-1.491 0L6.67 12a.963.963 0 0 1 .07-1.279l.382-.384a.95.95 0 0 1 1.297-.05l1.861 2.073 5.65-5.5a.954.954 0 0 1 1.608.7c0 .218-.074.43-.21.6Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 125 125" id="info">
-    <path d="M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm0 14.7a11 11 0 110 22 11 11 0 010-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="info">
+    <path d="M12 1.812c-5.633 0-10.2 4.567-10.2 10.2 0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm0 2.4a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Zm3 14.4H9.6v-.618l.127-.004c.373-.012.65-.118.825-.315.062-.071.167-.314.167-1.132v-5.452c0-.778-.109-1.07-.2-1.18-.128-.153-.396-.243-.796-.268L9.6 9.636v-.624h4.2v7.531c0 .778.203 1.071.294 1.18.128.153.376.243.783.267l.123.008v.614Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="warning">
-    <path d="M15 0a15 15 0 100 30 15 15 0 000-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="warning">
+    <path d="M12.012 1.794c-5.65 0-10.23 4.58-10.23 10.23s4.58 10.23 10.23 10.23 10.23-4.58 10.23-10.23-4.58-10.23-10.23-10.23Zm-.958 3.896c.245-.261.566-.395.958-.409.392.014.713.148.958.41.258.275.387.66.387 1.153 0 .362-.508 7.023-.632 7.294-.125.27-.348.405-.669.405-.016 0-.029-.005-.044-.006-.016.001-.029.006-.045.006-.32 0-.543-.135-.668-.405s-.632-6.932-.632-7.294c0-.493.129-.877.387-1.154Zm1.902 12.72c-.255.233-.59.36-.935.357-.35.004-.688-.121-.95-.353-.27-.234-.404-.562-.404-.984 0-.368.129-.682.387-.94a1.29 1.29 0 0 1 .949-.388c.374 0 .693.13.958.388.258.244.402.585.396.94 0 .416-.133.742-.4.98Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 140 125" id="danger">
-    <path d="M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0015.6 125H125a15.6 15.6 0 0013.5-23.5L83.8 7.8A15.6 15.6 0 0070.3 0zm19.2 50a6.4 6.4 0 014.4 1.9 6.4 6.4 0 010 9L79.4 75.6l15 15a6.4 6.4 0 010 9.2 6.4 6.4 0 01-4.5 1.9 6.4 6.4 0 01-4.6-2l-15-15-15 15a6.4 6.4 0 01-4.6 2 6.4 6.4 0 01-4.6-2 6.4 6.4 0 010-9l15-15L46.8 61a6.4 6.4 0 119-9.1l14.6 14.5L84.8 52a6.4 6.4 0 014.7-1.9z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="danger">
+    <path d="m21.832 17.617-7.886-13.5a2.256 2.256 0 0 0-3.892 0L2.186 17.583v.002l-.02.032h.001A2.248 2.248 0 0 0 4.113 21h15.773a2.25 2.25 0 0 0 1.946-3.383Zm-6.88-.714a.823.823 0 0 1-1.163 0l-1.93-1.932-1.93 1.932a.823.823 0 0 1-1.174-1.155l.01-.01 1.93-1.93-1.861-1.863a.823.823 0 0 1 1.163-1.164l1.862 1.862 1.861-1.862a.823.823 0 0 1 1.174 1.153l-.01.011-1.862 1.862 1.93 1.931a.824.824 0 0 1 0 1.165Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="buy">
-    <path d="M26.406 11.622H19.76V8.176c0-2.64-2.145-4.801-4.785-4.801s-4.785 2.16-4.785 4.801v3.446H3.35a1.5 1.5 0 00-1.286 2.272L7.85 26.625H21.8l5.892-12.731c.136-.225.258-.49.258-.772 0-.828-.715-1.5-1.544-1.5zm-21.556 3h5.25l.577 3.751H6.618zm4.5 9.753l-1.8-3.751h3.473l.577 3.75zm6.75 0h-2.4l-.6-3.751h3.6zm.9-6.002h-4.05l-.6-3.75h5.1zm.51-6.751H12.44l-.003-3.446a2.537 2.537 0 115.073 0zm2.94 12.753h-2.26l.61-3.751h3.45zm2.731-6.002H19.08l.471-3.75h5.255z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="buy">
+    <path d="M21.205 9.31h-5.317V6.553c0-2.113-1.716-3.841-3.828-3.841S8.232 4.44 8.232 6.552V9.31H2.76a1.2 1.2 0 0 0-1.03 1.817l4.63 10.185h11.16l4.714-10.185c.108-.18.206-.391.206-.617 0-.663-.572-1.2-1.235-1.2ZM3.96 11.71h4.2l.462 3H5.375l-1.415-3Zm3.6 7.802L6.12 16.51h2.778l.462 3h-1.8Zm5.4 0h-1.92l-.48-3.001h2.88l-.48 3Zm.72-4.801h-3.24l-.48-3.001h4.08l-.36 3Zm.408-5.401h-4.055l-.003-2.757a2.03 2.03 0 1 1 4.059 0l-.001 2.757Zm2.352 10.202h-1.807l.487-3.001h2.76l-1.44 3Zm2.185-4.801h-3.282l.377-3.001h4.204l-1.299 3Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="search">
-    <path d="M892.285,819.383L666.631,593.728a310.794,310.794,0,0,0,58.05-181.388c0-172.5-139.839-312.34-312.341-312.34S100,239.838,100,412.34,239.838,724.681,412.34,724.681a310.918,310.918,0,0,0,181.4-58.05L819.383,892.275a25.053,25.053,0,0,0,35.342,0l37.56-37.55A25.071,25.071,0,0,0,892.285,819.383ZM412.34,624.732c-117.3,0-212.391-95.092-212.391-212.392S295.04,199.949,412.34,199.949,624.732,295.04,624.732,412.34,529.64,624.732,412.34,624.732Z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="search">
+    <path d="m21.415 19.665-5.416-5.416A7.496 7.496 0 1 0 14.25 16l5.416 5.416a.601.601 0 0 0 .848 0l.902-.902a.602.602 0 0 0 0-.848ZM9.896 14.994a5.097 5.097 0 1 1 0-10.195 5.097 5.097 0 0 1 0 10.195Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="delete">
-    <path d="M24.536 20.298a1.499 1.499 0 010 2.12l-2.119 2.118a1.499 1.499 0 01-2.119 0L15 19.238l-5.298 5.298a1.499 1.499 0 01-2.12 0l-2.118-2.119a1.499 1.499 0 010-2.119L10.762 15 5.464 9.702a1.499 1.499 0 010-2.12l2.119-2.118a1.499 1.499 0 012.119 0L15 10.762l5.298-5.298a1.499 1.499 0 012.12 0l2.118 2.119a1.499 1.499 0 010 2.119L19.238 15z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="delete">
+    <path d="M19.62 16.228a1.2 1.2 0 0 1 0 1.696l-1.696 1.696a1.2 1.2 0 0 1-1.696 0l-4.24-4.24-4.24 4.24a1.2 1.2 0 0 1-1.696 0l-1.696-1.696a1.2 1.2 0 0 1 0-1.696l4.24-4.24-4.24-4.24a1.2 1.2 0 0 1 0-1.696l1.696-1.696a1.2 1.2 0 0 1 1.696 0l4.24 4.24 4.24-4.24a1.2 1.2 0 0 1 1.696 0l1.696 1.696a1.2 1.2 0 0 1 0 1.696l-4.24 4.24 4.24 4.24Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="settings">
-    <path d="M24.842 15c0-3.319 3.622-.808 1.936-4.878-1.687-4.071-2.472.264-4.819-2.082-2.346-2.347 1.99-3.131-2.08-4.817C15.807 1.536 18.318 5.157 15 5.157c-3.318 0-.807-3.62-4.878-1.934-4.07 1.686.265 2.47-2.082 4.817-2.346 2.346-3.131-1.99-4.817 2.082-1.687 4.07 1.934 1.56 1.934 4.878s-3.621.808-1.934 4.878c1.686 4.071 2.47-.264 4.817 2.081 2.347 2.347-1.989 3.132 2.082 4.818 4.07 1.687 1.56-1.934 4.878-1.934s.807 3.62 4.879 1.934c4.07-1.686-.266-2.471 2.08-4.818 2.347-2.345 3.132 1.99 4.819-2.08 1.686-4.071-1.936-1.56-1.936-4.88zm-9.827-5.985a6 6 0 110 12 6 6 0 010-12z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="tick">
+    <path d="M21 5.76a1.55 1.55 0 0 0-2.613-1.138l-9.18 8.938-3.025-3.368a1.545 1.545 0 0 0-2.107.08l-.62.625a1.566 1.566 0 0 0-.115 2.077l4.966 6.24a1.546 1.546 0 0 0 2.423 0l9.931-12.48c.22-.276.34-.62.34-.974Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="tick">
-    <path d="M26.76 6.205a2.017 2.017 0 00-3.4-1.481h-.001L11.41 16.356l-3.937-4.385a2.01 2.01 0 00-2.742.106l-.808.812a2.038 2.038 0 00-.149 2.704l6.463 8.122a2.012 2.012 0 003.153 0L26.318 7.473a2.028 2.028 0 00.443-1.268z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="day">
+    <path d="M19.2 4.2h-2.4v-.912a.89.89 0 0 0-.9-.888.9.9 0 0 0-.9.9v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm.6 15.6H4.5a.9.9 0 0 1-.9-.9V9.6h15.3a.9.9 0 0 1 .9.9v9.3ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm8.4 0c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.112c.377.278.6.72.6 1.188a1.5 1.5 0 1 1-3 0Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="day">
-    <path d="M24.677 5.323h-3.096V4.146c0-.642-.52-1.146-1.162-1.146a1.161 1.161 0 00-1.16 1.161v1.162h-8.517V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zm.775 20.129H5.71a1.161 1.161 0 01-1.162-1.162v-12H24.29a1.161 1.161 0 011.162 1.162zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.485a1.935 1.935 0 11-3.097 1.547zm10.839 0a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.5a1.904 1.904 0 01.774 1.533 1.935 1.935 0 01-3.871 0z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="week">
+    <path d="M19.2 4.2h-2.4v-.912a.89.89 0 0 0-.9-.888.9.9 0 0 0-.9.9v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.6H4.5a.9.9 0 0 1-.9-.9V9.6h3.6v10.2ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.5H7.8V9.6h3.6v10.2Zm4.2 0H12V9.6h3.6v10.2ZM14.4 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.112c.377.278.6.72.6 1.188a1.5 1.5 0 1 1-3 0Zm5.4 13.5h-3.6V9.6h2.7a.9.9 0 0 1 .9.9v9.3Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="week">
-    <path d="M24.677 5.323h-3.096V4.146c0-.642-.52-1.146-1.162-1.146a1.161 1.161 0 00-1.16 1.161v1.162h-8.517V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zM9.194 25.452H5.71a1.161 1.161 0 01-1.162-1.162v-12h4.646zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.485a1.935 1.935 0 11-3.097 1.547zm6.968 17.42H9.968V12.29h4.645zm5.42 0h-4.646V12.29h4.645zm-1.55-17.42a1.932 1.932 0 01.775-1.548v1.548a1.161 1.161 0 002.323 0V6.5a1.904 1.904 0 01.774 1.533 1.935 1.935 0 01-3.871 0zm6.969 17.42h-4.646V12.29h3.484a1.161 1.161 0 011.162 1.162z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="month">
+    <path d="M19.2 4.2h-2.4v-.9a.9.9 0 1 0-1.8 0v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.598H4.5a.9.9 0 0 1-.9-.9V16.8H7.2v2.998Zm0-3.598H3.6v-3H7.2v3Zm0-3.6H3.6V9.598H7.2V12.6ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.498H7.8V16.8h3.6v2.998Zm0-3.598H7.8v-3h3.6v3Zm0-3.6H7.8V9.598h3.6V12.6Zm4.2 7.198H12V16.8h3.6v2.998Zm0-3.598H12v-3h3.6v3Zm0-3.6H12V9.598h3.6V12.6Zm-1.2-6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1a1.5 1.5 0 1 1-2.4 1.2Zm5.399 9.9H16.2v-3H19.8v3Zm0-3.6H16.2V9.598H18.9a.9.9 0 0 1 .9.9V12.6Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="month">
-    <path d="M24.677 5.323h-3.096V4.16a1.161 1.161 0 00-2.323 0v1.162h-8.516V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zM9.194 25.449H5.708a1.161 1.161 0 01-1.161-1.161V21.58h4.647zm0-4.643H4.547v-3.87h4.647zm0-4.645H4.547v-3.873h4.647zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.484a1.935 1.935 0 11-3.097 1.548zm6.968 17.417H9.968V21.58h4.645zm0-4.643H9.968v-3.87h4.645zm0-4.645H9.968v-3.873h4.645zm5.42 9.288h-4.646V21.58h4.646zm0-4.643h-4.646v-3.87h4.646zm0-4.645h-4.646v-3.873h4.646zm-1.55-8.129a1.932 1.932 0 01.775-1.548v1.548a1.161 1.161 0 002.323 0V6.484a1.935 1.935 0 11-3.097 1.548zm6.967 12.774h-4.643v-3.87h4.643zm0-4.645h-4.643v-3.873h3.482a1.161 1.161 0 011.161 1.16z"/>
+  <symbol fill="#527EDB" viewBox="0 0 24 24" id="assistance">
+    <path d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm.74 16.335a1.3 1.3 0 0 1-.89.343 1.346 1.346 0 0 1-.911-.338c-.26-.226-.39-.54-.39-.946 0-.359.126-.661.377-.906.25-.246.558-.368.924-.368.359 0 .661.122.907.368.245.245.367.547.367.906 0 .4-.128.713-.385.941Zm3.194-7.92a3.894 3.894 0 0 1-.701.944c-.271.265-.757.712-1.459 1.339-.164.147-.32.302-.466.466a1.9 1.9 0 0 0-.26.368c-.056.107-.1.218-.134.334-.03.11-.078.306-.14.586-.109.593-.448.89-1.019.89a1.04 1.04 0 0 1-.748-.292c-.203-.193-.304-.481-.304-.864 0-.479.074-.894.223-1.244.14-.34.34-.653.59-.924.245-.265.576-.58.992-.946.365-.319.629-.56.792-.722.161-.161.3-.344.41-.543.111-.2.169-.423.167-.65 0-.457-.17-.842-.51-1.155-.339-.314-.776-.47-1.312-.47-.627 0-1.09.157-1.386.474-.296.317-.547.783-.752 1.399-.195.644-.562.966-1.104.966-.32 0-.59-.112-.809-.338-.22-.225-.329-.469-.329-.731 0-.542.174-1.09.522-1.647.348-.556.855-1.016 1.523-1.381.667-.365 1.445-.548 2.335-.548.826 0 1.556.153 2.19.458.633.305 1.121.72 1.467 1.245.345.524.517 1.094.517 1.71 0 .485-.098.91-.295 1.275Z"/>
   </symbol>
-  <symbol fill="#527EDB" viewBox="0 0 20 20" id="tooltip">
-    <path fill-rule="evenodd" d="M10 1.5c-4.694 0-8.5 3.806-8.5 8.5s3.806 8.5 8.5 8.5 8.5-3.806 8.5-8.5-3.806-8.5-8.5-8.5zm.616 13.613c-.202.185-.467.287-.741.285-.28.004-.55-.097-.76-.282-.216-.187-.324-.45-.324-.787 0-.3.105-.552.314-.756.209-.204.465-.306.77-.306.3 0 .551.102.755.306.205.204.307.456.307.756 0 .332-.107.594-.321.784zm2.662-6.601c-.153.29-.35.556-.584.787-.226.221-.63.593-1.216 1.116-.136.122-.266.252-.388.389-.084.093-.157.196-.217.306-.046.089-.083.182-.11.278-.027.093-.066.256-.119.488-.09.495-.372.742-.848.742-.247 0-.455-.081-.624-.243-.168-.161-.253-.401-.253-.72 0-.399.062-.745.186-1.037.117-.283.284-.544.492-.77.204-.22.48-.483.827-.788.304-.266.523-.466.659-.602.134-.134.25-.286.342-.453.093-.165.14-.352.14-.541 0-.38-.142-.701-.425-.963-.283-.261-.648-.392-1.094-.392-.523 0-.908.132-1.155.396s-.456.652-.627 1.165c-.162.537-.469.806-.92.806-.266 0-.49-.094-.674-.282-.183-.187-.274-.39-.274-.609 0-.451.145-.909.435-1.372.29-.464.713-.847 1.269-1.151.556-.305 1.204-.457 1.946-.457.689 0 1.297.127 1.825.382.527.254.934.6 1.222 1.037.288.437.431.912.431 1.426 0 .404-.082.758-.246 1.062z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="document">
+    <path d="M15 1.8v3.6c0 .663.478 1.2 1.067 1.2H19.8L15 1.8Zm1.2 6a2.4 2.4 0 0 1-2.4-2.4V1.8H4.2V21a1.2 1.2 0 0 0 1.2 1.2h14.4V7.8h-3.6ZM7.8 9h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 0 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm2.4 3.6H7.8a.6.6 0 1 1 0-1.2h2.4a.6.6 0 0 1 0 1.2Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 30 30" id="document">
-    <path fill-rule="evenodd" d="M18.75 2.25v4.5c0 .828.597 1.5 1.333 1.5h4.667l-6-6zm1.5 7.5c-1.657 0-3-1.343-3-3v-4.5h-12v24c0 .828.672 1.5 1.5 1.5h18v-18h-4.5zm-10.5 1.5h10.5c.414 0 .75.336.75.75s-.336.75-.75.75H9.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm0 3h10.5c.414 0 .75.336.75.75s-.336.75-.75.75H9.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm0 3h10.5c.414 0 .75.336.75.75s-.336.75-.75.75H9.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm3 4.5h-3c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h3c.414 0 .75.336.75.75s-.336.75-.75.75z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="live-chat">
+    <path fill-rule="evenodd" d="M19.8 3H2.4v12.6a1.8 1.8 0 0 0 1.8 1.8h2.4v4.2l4.2-4.2h10.8V4.8A1.8 1.8 0 0 0 19.8 3Zm-3.67 5.294h-.265C15.275 6.252 13.768 4.8 12 4.8c-1.768 0-3.276 1.452-3.865 3.494h-.264A1.27 1.27 0 0 0 6.6 9.564v1.271c0 .702.569 1.27 1.27 1.27h.265C8.725 14.149 10.232 15.6 12 15.6c1.768 0 3.276-1.452 3.865-3.494h.264a1.27 1.27 0 0 0 1.271-1.27V9.564a1.27 1.27 0 0 0-1.27-1.27Zm-1.178 4.447h-2.053a.953.953 0 1 0 0 .635h1.698a4.534 4.534 0 0 1-.182.256c-.325.426-.7.758-1.115.988-.806.46-1.794.46-2.6 0a3.624 3.624 0 0 1-1.115-.988 5.066 5.066 0 0 1-.785-1.526 6.335 6.335 0 0 1 0-3.812 5.59 5.59 0 0 1 .172-.464.435.435 0 0 1 .462-.26c.492.071 1.376.34 2.566 1.283 1.442 1.142 2.974.827 3.446.556.032.262.048.526.048.791a6.186 6.186 0 0 1-.294 1.906c-.07.217-.152.429-.248.635Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="contact">
-    <path fill-rule="evenodd" d="M 825 125 H 100 V 650 a 75 75 0 0 0 75 75 H 275 V 900 L 450 725 H 900 V 200 A 75 75 0 0 0 825 125 Z M 672.059 345.588 H 661.034 C 636.487 260.512 573.648 200 500 200 S 363.513 260.512 338.966 345.588 H 327.941 A 52.942 52.942 0 0 0 275 398.529 v 52.942 a 52.942 52.942 0 0 0 52.941 52.941 h 11.025 C 363.513 589.488 426.352 650 500 650 s 136.487 -60.512 161.034 -145.588 h 11.025 A 52.942 52.942 0 0 0 725 451.471 V 398.529 A 52.942 52.942 0 0 0 672.059 345.588 Z M 622.983 530.882 H 537.438 a 39.707 39.707 0 1 0 0 26.471 h 70.784 q -3.633 5.5 -7.585 10.666 c -13.568 17.743 -29.2 31.583 -46.476 41.136 a 109.226 109.226 0 0 1 -108.322 0 c -17.271 -9.553 -32.908 -23.393 -46.476 -41.136 c -13.97 -18.268 -24.977 -39.661 -32.715 -63.585 a 263.954 263.954 0 0 1 0 -158.868 q 3.219 -9.948 7.188 -19.3 a 18.115 18.115 0 0 1 19.246 -10.826 C 413.6 318.373 450.416 329.608 500 368.876 c 60.075 47.576 123.906 34.466 143.568 23.146 A 268.978 268.978 0 0 1 645.588 425 a 257.715 257.715 0 0 1 -12.236 79.434 A 230.064 230.064 0 0 1 622.983 530.882 Z"></path>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="location-pin-compass">
+    <path d="M18.6 8.4a6.6 6.6 0 1 0-12.33 3.277L12 22.2l5.73-10.523A6.57 6.57 0 0 0 18.6 8.4ZM12 13.2a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6Zm2.963-7.576-6.92 3.068 2.474.73.378 2.825 4.068-6.623Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="locate">
-    <path fill-rule="evenodd" d="M 775 350 C 775 198.125 651.877 75 500 75 S 225 198.125 225 350 a 273.743 273.743 0 0 0 36.235 136.528 h 0 L 500 925 L 738.769 486.528 h 0 A 273.733 273.733 0 0 0 775 350 Z M 500 550 c -110.457 0 -200 -89.543 -200 -200 s 89.543 -200 200 -200 s 200 89.543 200 200 S 610.457 550 500 550 Z M 623.457 234.342 L 335.14 362.17 l 103.051 30.409 l 15.768 117.692 Z"></path>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="mobile-network-coverage">
+    <path d="M18 21.6a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V7.2a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v14.4Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V10.8a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v10.8Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6v-7.2a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v7.2Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V18a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v3.6Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 31 31" id="coverage">
-    <path fill-rule="evenodd" d="M 8.25 26.25 h -4.5 v -9 h 4.5 v 9 Z m 6 0 h -4.5 v -13.5 h 4.5 v 13.5 Z m 6 0 h -4.5 v -18 h 4.5 v 18 Z m 6 0 h -4.5 V 3.75 h 4.5 v 22.5 Z"></path>
-  </symbol>
-  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="protection">
-    <path fill-rule="evenodd" d="M 664.923 225.063 c 0 90.608 -73.615 164.062 -164.423 164.062 S 336.077 315.671 336.077 225.063 S 409.692 61 500.5 61 S 664.923 134.454 664.923 225.063 Z M 632.188 376.531 a 201.295 201.295 0 0 1 -263.376 0 A 200.419 200.419 0 0 0 263 553.187 V 699.021 C 263 829.9 369.333 936 500.5 936 S 738 829.9 738 699.021 V 553.187 A 200.419 200.419 0 0 0 632.188 376.531 Z M 516.793 563.4 a 65.557 65.557 0 1 1 -65.556 -65.625 A 65.591 65.591 0 0 1 516.793 563.4 Z m -8.773 66.439 a 87.1 87.1 0 0 1 -112.756 0.7 a 83.527 83.527 0 0 0 -41.634 72.31 v 60.764 a 98.64 98.64 0 1 0 197.279 0 V 702.849 A 83.526 83.526 0 0 0 508.02 629.835 Z"></path>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="child-protection">
+    <path fill-rule="evenodd" d="M15.958 5.402a3.942 3.942 0 0 1-3.946 3.937 3.942 3.942 0 0 1-3.946-3.937 3.942 3.942 0 0 1 3.946-3.938 3.942 3.942 0 0 1 3.946 3.938Zm-.785 3.635a4.831 4.831 0 0 1-6.322 0 4.81 4.81 0 0 0-2.539 4.24v3.5c0 3.14 2.552 5.687 5.7 5.687s5.7-2.546 5.7-5.687v-3.5a4.81 4.81 0 0 0-2.54-4.24Zm-2.77 4.485a1.573 1.573 0 1 1-3.147-.004 1.573 1.573 0 0 1 3.147.004Zm-.21 1.594a2.09 2.09 0 0 1-2.707.017c-.619.359-1 1.02-.999 1.735v1.459a2.367 2.367 0 1 0 4.735 0v-1.459c0-.727-.394-1.398-1.03-1.752Z"/>
   </symbol>
 </svg>

From 89978a75c0ae306b2d01e99b0c176fbd7eb385a2 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Fri, 31 Mar 2023 17:00:53 +0200
Subject: [PATCH 02/39] add doc + change the way to color toolip icon (to
 review again)

---
 site/content/docs/5.3/extend/icons.md           | 17 +++++++++++++++++
 .../docs/5.3/assets/img/boosted-sprite.svg      |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 60e2d4d14f..aeb9269ef1 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -68,6 +68,23 @@ SVG sprites allow you to reference an external file similar to an `<img>` elemen
   </div>
 </div>
 
+To create your own SVG sprite file, containing only the icons you need:
+- download the icons from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
+- optimise them with [svgo](https://github.com/svg/svgo)
+- include the path in a tag `<symbol>`
+- you may have the attributes `fill="#000000"` and/or `fill-rule="evenodd"`, only if needed
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon1">
+    <path d="..."/>
+  </symbol>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon2">
+    <path fill-rule="evenodd" d="..."/>
+  </symbol>
+</svg>
+```
+
 <div class="row my-4">
   <div class="col-md-4">
 
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index 33be6861a4..23ce06e9d8 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -32,8 +32,8 @@
   <symbol fill="currentColor" viewBox="0 0 24 24" id="month">
     <path d="M19.2 4.2h-2.4v-.9a.9.9 0 1 0-1.8 0v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.598H4.5a.9.9 0 0 1-.9-.9V16.8H7.2v2.998Zm0-3.598H3.6v-3H7.2v3Zm0-3.6H3.6V9.598H7.2V12.6ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.498H7.8V16.8h3.6v2.998Zm0-3.598H7.8v-3h3.6v3Zm0-3.6H7.8V9.598h3.6V12.6Zm4.2 7.198H12V16.8h3.6v2.998Zm0-3.598H12v-3h3.6v3Zm0-3.6H12V9.598h3.6V12.6Zm-1.2-6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1a1.5 1.5 0 1 1-2.4 1.2Zm5.399 9.9H16.2v-3H19.8v3Zm0-3.6H16.2V9.598H18.9a.9.9 0 0 1 .9.9V12.6Z"/>
   </symbol>
-  <symbol fill="#527EDB" viewBox="0 0 24 24" id="assistance">
-    <path d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm.74 16.335a1.3 1.3 0 0 1-.89.343 1.346 1.346 0 0 1-.911-.338c-.26-.226-.39-.54-.39-.946 0-.359.126-.661.377-.906.25-.246.558-.368.924-.368.359 0 .661.122.907.368.245.245.367.547.367.906 0 .4-.128.713-.385.941Zm3.194-7.92a3.894 3.894 0 0 1-.701.944c-.271.265-.757.712-1.459 1.339-.164.147-.32.302-.466.466a1.9 1.9 0 0 0-.26.368c-.056.107-.1.218-.134.334-.03.11-.078.306-.14.586-.109.593-.448.89-1.019.89a1.04 1.04 0 0 1-.748-.292c-.203-.193-.304-.481-.304-.864 0-.479.074-.894.223-1.244.14-.34.34-.653.59-.924.245-.265.576-.58.992-.946.365-.319.629-.56.792-.722.161-.161.3-.344.41-.543.111-.2.169-.423.167-.65 0-.457-.17-.842-.51-1.155-.339-.314-.776-.47-1.312-.47-.627 0-1.09.157-1.386.474-.296.317-.547.783-.752 1.399-.195.644-.562.966-1.104.966-.32 0-.59-.112-.809-.338-.22-.225-.329-.469-.329-.731 0-.542.174-1.09.522-1.647.348-.556.855-1.016 1.523-1.381.667-.365 1.445-.548 2.335-.548.826 0 1.556.153 2.19.458.633.305 1.121.72 1.467 1.245.345.524.517 1.094.517 1.71 0 .485-.098.91-.295 1.275Z"/>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="assistance">
+    <path fill="#527edb" d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm.74 16.335a1.3 1.3 0 0 1-.89.343 1.346 1.346 0 0 1-.911-.338c-.26-.226-.39-.54-.39-.946 0-.359.126-.661.377-.906.25-.246.558-.368.924-.368.359 0 .661.122.907.368.245.245.367.547.367.906 0 .4-.128.713-.385.941Zm3.194-7.92a3.894 3.894 0 0 1-.701.944c-.271.265-.757.712-1.459 1.339-.164.147-.32.302-.466.466a1.9 1.9 0 0 0-.26.368c-.056.107-.1.218-.134.334-.03.11-.078.306-.14.586-.109.593-.448.89-1.019.89a1.04 1.04 0 0 1-.748-.292c-.203-.193-.304-.481-.304-.864 0-.479.074-.894.223-1.244.14-.34.34-.653.59-.924.245-.265.576-.58.992-.946.365-.319.629-.56.792-.722.161-.161.3-.344.41-.543.111-.2.169-.423.167-.65 0-.457-.17-.842-.51-1.155-.339-.314-.776-.47-1.312-.47-.627 0-1.09.157-1.386.474-.296.317-.547.783-.752 1.399-.195.644-.562.966-1.104.966-.32 0-.59-.112-.809-.338-.22-.225-.329-.469-.329-.731 0-.542.174-1.09.522-1.647.348-.556.855-1.016 1.523-1.381.667-.365 1.445-.548 2.335-.548.826 0 1.556.153 2.19.458.633.305 1.121.72 1.467 1.245.345.524.517 1.094.517 1.71 0 .485-.098.91-.295 1.275Z"/>
   </symbol>
   <symbol fill="currentColor" viewBox="0 0 24 24" id="document">
     <path d="M15 1.8v3.6c0 .663.478 1.2 1.067 1.2H19.8L15 1.8Zm1.2 6a2.4 2.4 0 0 1-2.4-2.4V1.8H4.2V21a1.2 1.2 0 0 0 1.2 1.2h14.4V7.8h-3.6ZM7.8 9h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 0 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm2.4 3.6H7.8a.6.6 0 1 1 0-1.2h2.4a.6.6 0 0 1 0 1.2Z"/>

From ac36e35e833ee2cb34a7f74dabf414705d472fff Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Mon, 3 Apr 2023 18:02:21 +0200
Subject: [PATCH 03/39] add class bd-blue-fg to manager color of asistance icon
 foreground

---
 site/assets/scss/_tooltips.scss              | 3 +++
 site/assets/scss/docs.scss                   | 1 +
 site/content/docs/5.3/components/tooltips.md | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 site/assets/scss/_tooltips.scss

diff --git a/site/assets/scss/_tooltips.scss b/site/assets/scss/_tooltips.scss
new file mode 100644
index 0000000000..0b02168ced
--- /dev/null
+++ b/site/assets/scss/_tooltips.scss
@@ -0,0 +1,3 @@
+.bd-blue-fg {
+  color: #527edb;
+}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index dee69cd439..ffbb442659 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -51,6 +51,7 @@ $enable-cssgrid: true;
 @import "clipboard-js";
 @import "placeholder-img";
 @import "scrolling";
+@import "tooltips";
 
 // Load docs dependencies
 @import "syntax";
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index 26f5affc90..110971ba21 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -143,7 +143,7 @@ With an SVG:
   </svg>
 </a>
 
-<button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
+<button type="button" class="btn btn-link p-0 me-3 bd-blue-fg" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
   <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
   </svg>

From f06b0e9616de036f2e6e4c56ad411d6fa2e498a0 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Tue, 4 Apr 2023 09:58:36 +0200
Subject: [PATCH 04/39] enhance doc + cspell correction

---
 site/content/docs/5.3/extend/icons.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index aeb9269ef1..907f14d62b 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -69,9 +69,9 @@ SVG sprites allow you to reference an external file similar to an `<img>` elemen
 </div>
 
 To create your own SVG sprite file, containing only the icons you need:
-- download the icons from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
-- optimise them with [svgo](https://github.com/svg/svgo)
-- include the path in a tag `<symbol>`
+- download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
+- optimize them with [svgo](https://github.com/svg/svgo)
+- include the path in a tag `<symbol>`, inside a SVG file, like below
 - you may have the attributes `fill="#000000"` and/or `fill-rule="evenodd"`, only if needed
 
 ```html

From 71296726ec0f673788e090766ac20a80d20f4eaa Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Thu, 8 Jun 2023 14:46:22 +0200
Subject: [PATCH 05/39] Enhance Solaris icons doc

---
 site/assets/scss/_tooltips.scss               |  3 -
 site/assets/scss/docs.scss                    |  1 -
 site/content/docs/5.3/components/tooltips.md  |  8 +--
 site/content/docs/5.3/extend/icons.md         | 12 ++--
 site/layouts/shortcodes/orange-footer.html    |  8 +--
 .../docs/5.3/assets/img/boosted-sprite.svg    | 71 ++++++++++---------
 6 files changed, 53 insertions(+), 50 deletions(-)
 delete mode 100644 site/assets/scss/_tooltips.scss

diff --git a/site/assets/scss/_tooltips.scss b/site/assets/scss/_tooltips.scss
deleted file mode 100644
index 0b02168ced..0000000000
--- a/site/assets/scss/_tooltips.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.bd-blue-fg {
-  color: #527edb;
-}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index ffbb442659..dee69cd439 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -51,7 +51,6 @@ $enable-cssgrid: true;
 @import "clipboard-js";
 @import "placeholder-img";
 @import "scrolling";
-@import "tooltips";
 
 // Load docs dependencies
 @import "syntax";
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index 078f8edada..14923fcc4d 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -129,7 +129,7 @@ With an SVG:
 
   <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
     <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
     </svg>
     <span class="visually-hidden">Helper</span>
   </button>
@@ -143,9 +143,9 @@ With an SVG:
   </svg>
 </a>
 
-<button type="button" class="btn btn-link p-0 me-3 bd-blue-fg" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
-  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
+<button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" focusable="false" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
   </svg>
   <span class="visually-hidden">Helper</span>
 </button>
diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 907f14d62b..0e8345d332 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -52,16 +52,18 @@ SVG sprites allow you to reference an external file similar to an `<img>` elemen
   <div class="col-md-8">
 
 {{< example class="mt-0 text-primary" >}}
+<!-- todo atre exemple avec fill currentcolor et text success pour la coche ? -->
 <svg width="2em" height="2em" fill="currentColor" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
 </svg>
-<svg width="2em" height="2em" class="text-body-secondary" aria-hidden="true">
+<svg width="2em" height="2em" class="text-info" aria-hidden="true">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
 </svg>
-<svg width="2em" height="2em" fill="currentColor" aria-hidden="true" focusable="false">
+<!-- todo exemple à changer pour accessibilité ? -->
+<svg width="2em" height="2em" class="text-warning" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
 </svg>
-<svg width="2em" height="2em" fill="currentColor" aria-hidden="true" focusable="false">
+<svg width="2em" height="2em" class="text-danger" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
 </svg>
 {{< /example >}}
@@ -72,7 +74,7 @@ To create your own SVG sprite file, containing only the icons you need:
 - download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
 - optimize them with [svgo](https://github.com/svg/svgo)
 - include the path in a tag `<symbol>`, inside a SVG file, like below
-- you may have the attributes `fill="#000000"` and/or `fill-rule="evenodd"`, only if needed
+- you may add the attributes `fill="#000000"` and/or `fill-rule="evenodd"`, only if needed
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">
@@ -85,6 +87,8 @@ To create your own SVG sprite file, containing only the icons you need:
 </svg>
 ```
 
+<!-- ajouter lien vers utilities > colors -->
+
 <div class="row my-4">
   <div class="col-md-4">
 
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
index da17edb78e..8f6e2d9ee0 100644
--- a/site/layouts/shortcodes/orange-footer.html
+++ b/site/layouts/shortcodes/orange-footer.html
@@ -154,10 +154,10 @@ <h3 class="accordion-header footer-heading" id="headingFour{{ $id }}">
 {{- if $service }}
   <div class="container-xxl footer-service">
     <ul class="navbar-nav gap-3 gap-md-4">
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#location-pin-compass"/></svg><span>Store locator</span></a></li>
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#mobile-network-coverage"/></svg><span>Coverage checker</span></a></li>
-      <li>{{- if $show_active_link }}<a class="nav-link gap-1 active" href="#" aria-current="page">{{- else }}<a class="nav-link gap-1" href="#">{{- end }}<svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#live-chat"/></svg><span>Contact us</span></a></li>
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#child-protection"/></svg><span>Child protection</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#locate"/></svg><span>Store locator</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#coverage"/></svg><span>Coverage checker</span></a></li>
+      <li>{{- if $show_active_link }}<a class="nav-link gap-1 active" href="#" aria-current="page">{{- else }}<a class="nav-link gap-1" href="#">{{- end }}<svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#contact"/></svg><span>Contact us</span></a></li>
+      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#protection"/></svg><span>Child protection</span></a></li>
     </ul>
   </div>
 {{- if $mandatory }}
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index 23ce06e9d8..f703927469 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -1,53 +1,56 @@
 <svg xmlns="http://www.w3.org/2000/svg">
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="success">
-    <path d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm5.33 6.36-6.112 7.68a.951.951 0 0 1-1.491 0L6.67 12a.963.963 0 0 1 .07-1.279l.382-.384a.95.95 0 0 1 1.297-.05l1.861 2.073 5.65-5.5a.954.954 0 0 1 1.608.7c0 .218-.074.43-.21.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 125 125" id="success">
+    <path d="M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 01-1.3 3.7L57.7 86a5.8 5.8 0 01-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 011.7-4.1l2.3-2.4a5.8 5.8 0 014.2-1.7 5.8 5.8 0 013.8 1.4L52 64.7 86.6 31a5.8 5.8 0 014-1.6z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="info">
-    <path d="M12 1.812c-5.633 0-10.2 4.567-10.2 10.2 0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm0 2.4a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Zm3 14.4H9.6v-.618l.127-.004c.373-.012.65-.118.825-.315.062-.071.167-.314.167-1.132v-5.452c0-.778-.109-1.07-.2-1.18-.128-.153-.396-.243-.796-.268L9.6 9.636v-.624h4.2v7.531c0 .778.203 1.071.294 1.18.128.153.376.243.783.267l.123.008v.614Z"/>
+  <symbol fill="currentColor" viewBox="0 0 125 125" id="info">
+    <path d="M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm0 14.7a11 11 0 110 22 11 11 0 010-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="warning">
-    <path d="M12.012 1.794c-5.65 0-10.23 4.58-10.23 10.23s4.58 10.23 10.23 10.23 10.23-4.58 10.23-10.23-4.58-10.23-10.23-10.23Zm-.958 3.896c.245-.261.566-.395.958-.409.392.014.713.148.958.41.258.275.387.66.387 1.153 0 .362-.508 7.023-.632 7.294-.125.27-.348.405-.669.405-.016 0-.029-.005-.044-.006-.016.001-.029.006-.045.006-.32 0-.543-.135-.668-.405s-.632-6.932-.632-7.294c0-.493.129-.877.387-1.154Zm1.902 12.72c-.255.233-.59.36-.935.357-.35.004-.688-.121-.95-.353-.27-.234-.404-.562-.404-.984 0-.368.129-.682.387-.94a1.29 1.29 0 0 1 .949-.388c.374 0 .693.13.958.388.258.244.402.585.396.94 0 .416-.133.742-.4.98Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="warning">
+    <path d="M15 0a15 15 0 100 30 15 15 0 000-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="danger">
-    <path d="m21.832 17.617-7.886-13.5a2.256 2.256 0 0 0-3.892 0L2.186 17.583v.002l-.02.032h.001A2.248 2.248 0 0 0 4.113 21h15.773a2.25 2.25 0 0 0 1.946-3.383Zm-6.88-.714a.823.823 0 0 1-1.163 0l-1.93-1.932-1.93 1.932a.823.823 0 0 1-1.174-1.155l.01-.01 1.93-1.93-1.861-1.863a.823.823 0 0 1 1.163-1.164l1.862 1.862 1.861-1.862a.823.823 0 0 1 1.174 1.153l-.01.011-1.862 1.862 1.93 1.931a.824.824 0 0 1 0 1.165Z"/>
+  <symbol fill="currentColor" viewBox="0 0 140 125" id="danger">
+    <path d="M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0015.6 125H125a15.6 15.6 0 0013.5-23.5L83.8 7.8A15.6 15.6 0 0070.3 0zm19.2 50a6.4 6.4 0 014.4 1.9 6.4 6.4 0 010 9L79.4 75.6l15 15a6.4 6.4 0 010 9.2 6.4 6.4 0 01-4.5 1.9 6.4 6.4 0 01-4.6-2l-15-15-15 15a6.4 6.4 0 01-4.6 2 6.4 6.4 0 01-4.6-2 6.4 6.4 0 010-9l15-15L46.8 61a6.4 6.4 0 119-9.1l14.6 14.5L84.8 52a6.4 6.4 0 014.7-1.9z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="buy">
-    <path d="M21.205 9.31h-5.317V6.553c0-2.113-1.716-3.841-3.828-3.841S8.232 4.44 8.232 6.552V9.31H2.76a1.2 1.2 0 0 0-1.03 1.817l4.63 10.185h11.16l4.714-10.185c.108-.18.206-.391.206-.617 0-.663-.572-1.2-1.235-1.2ZM3.96 11.71h4.2l.462 3H5.375l-1.415-3Zm3.6 7.802L6.12 16.51h2.778l.462 3h-1.8Zm5.4 0h-1.92l-.48-3.001h2.88l-.48 3Zm.72-4.801h-3.24l-.48-3.001h4.08l-.36 3Zm.408-5.401h-4.055l-.003-2.757a2.03 2.03 0 1 1 4.059 0l-.001 2.757Zm2.352 10.202h-1.807l.487-3.001h2.76l-1.44 3Zm2.185-4.801h-3.282l.377-3.001h4.204l-1.299 3Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="buy">
+    <path d="M26.406 11.622H19.76V8.176c0-2.64-2.145-4.801-4.785-4.801s-4.785 2.16-4.785 4.801v3.446H3.35a1.5 1.5 0 00-1.286 2.272L7.85 26.625H21.8l5.892-12.731c.136-.225.258-.49.258-.772 0-.828-.715-1.5-1.544-1.5zm-21.556 3h5.25l.577 3.751H6.618zm4.5 9.753l-1.8-3.751h3.473l.577 3.75zm6.75 0h-2.4l-.6-3.751h3.6zm.9-6.002h-4.05l-.6-3.75h5.1zm.51-6.751H12.44l-.003-3.446a2.537 2.537 0 115.073 0zm2.94 12.753h-2.26l.61-3.751h3.45zm2.731-6.002H19.08l.471-3.75h5.255z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="search">
-    <path d="m21.415 19.665-5.416-5.416A7.496 7.496 0 1 0 14.25 16l5.416 5.416a.601.601 0 0 0 .848 0l.902-.902a.602.602 0 0 0 0-.848ZM9.896 14.994a5.097 5.097 0 1 1 0-10.195 5.097 5.097 0 0 1 0 10.195Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="search">
+    <path d="M892.285,819.383L666.631,593.728a310.794,310.794,0,0,0,58.05-181.388c0-172.5-139.839-312.34-312.341-312.34S100,239.838,100,412.34,239.838,724.681,412.34,724.681a310.918,310.918,0,0,0,181.4-58.05L819.383,892.275a25.053,25.053,0,0,0,35.342,0l37.56-37.55A25.071,25.071,0,0,0,892.285,819.383ZM412.34,624.732c-117.3,0-212.391-95.092-212.391-212.392S295.04,199.949,412.34,199.949,624.732,295.04,624.732,412.34,529.64,624.732,412.34,624.732Z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="delete">
-    <path d="M19.62 16.228a1.2 1.2 0 0 1 0 1.696l-1.696 1.696a1.2 1.2 0 0 1-1.696 0l-4.24-4.24-4.24 4.24a1.2 1.2 0 0 1-1.696 0l-1.696-1.696a1.2 1.2 0 0 1 0-1.696l4.24-4.24-4.24-4.24a1.2 1.2 0 0 1 0-1.696l1.696-1.696a1.2 1.2 0 0 1 1.696 0l4.24 4.24 4.24-4.24a1.2 1.2 0 0 1 1.696 0l1.696 1.696a1.2 1.2 0 0 1 0 1.696l-4.24 4.24 4.24 4.24Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="delete">
+    <path d="M24.536 20.298a1.499 1.499 0 010 2.12l-2.119 2.118a1.499 1.499 0 01-2.119 0L15 19.238l-5.298 5.298a1.499 1.499 0 01-2.12 0l-2.118-2.119a1.499 1.499 0 010-2.119L10.762 15 5.464 9.702a1.499 1.499 0 010-2.12l2.119-2.118a1.499 1.499 0 012.119 0L15 10.762l5.298-5.298a1.499 1.499 0 012.12 0l2.118 2.119a1.499 1.499 0 010 2.119L19.238 15z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="tick">
-    <path d="M21 5.76a1.55 1.55 0 0 0-2.613-1.138l-9.18 8.938-3.025-3.368a1.545 1.545 0 0 0-2.107.08l-.62.625a1.566 1.566 0 0 0-.115 2.077l4.966 6.24a1.546 1.546 0 0 0 2.423 0l9.931-12.48c.22-.276.34-.62.34-.974Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="settings">
+    <path d="M24.842 15c0-3.319 3.622-.808 1.936-4.878-1.687-4.071-2.472.264-4.819-2.082-2.346-2.347 1.99-3.131-2.08-4.817C15.807 1.536 18.318 5.157 15 5.157c-3.318 0-.807-3.62-4.878-1.934-4.07 1.686.265 2.47-2.082 4.817-2.346 2.346-3.131-1.99-4.817 2.082-1.687 4.07 1.934 1.56 1.934 4.878s-3.621.808-1.934 4.878c1.686 4.071 2.47-.264 4.817 2.081 2.347 2.347-1.989 3.132 2.082 4.818 4.07 1.687 1.56-1.934 4.878-1.934s.807 3.62 4.879 1.934c4.07-1.686-.266-2.471 2.08-4.818 2.347-2.345 3.132 1.99 4.819-2.08 1.686-4.071-1.936-1.56-1.936-4.88zm-9.827-5.985a6 6 0 110 12 6 6 0 010-12z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="day">
-    <path d="M19.2 4.2h-2.4v-.912a.89.89 0 0 0-.9-.888.9.9 0 0 0-.9.9v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm.6 15.6H4.5a.9.9 0 0 1-.9-.9V9.6h15.3a.9.9 0 0 1 .9.9v9.3ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm8.4 0c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.112c.377.278.6.72.6 1.188a1.5 1.5 0 1 1-3 0Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="tick">
+    <path d="M26.76 6.205a2.017 2.017 0 00-3.4-1.481h-.001L11.41 16.356l-3.937-4.385a2.01 2.01 0 00-2.742.106l-.808.812a2.038 2.038 0 00-.149 2.704l6.463 8.122a2.012 2.012 0 003.153 0L26.318 7.473a2.028 2.028 0 00.443-1.268z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="week">
-    <path d="M19.2 4.2h-2.4v-.912a.89.89 0 0 0-.9-.888.9.9 0 0 0-.9.9v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.6H4.5a.9.9 0 0 1-.9-.9V9.6h3.6v10.2ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.5H7.8V9.6h3.6v10.2Zm4.2 0H12V9.6h3.6v10.2ZM14.4 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.112c.377.278.6.72.6 1.188a1.5 1.5 0 1 1-3 0Zm5.4 13.5h-3.6V9.6h2.7a.9.9 0 0 1 .9.9v9.3Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="day">
+    <path d="M24.677 5.323h-3.096V4.146c0-.642-.52-1.146-1.162-1.146a1.161 1.161 0 00-1.16 1.161v1.162h-8.517V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zm.775 20.129H5.71a1.161 1.161 0 01-1.162-1.162v-12H24.29a1.161 1.161 0 011.162 1.162zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.485a1.935 1.935 0 11-3.097 1.547zm10.839 0a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.5a1.904 1.904 0 01.774 1.533 1.935 1.935 0 01-3.871 0z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="month">
-    <path d="M19.2 4.2h-2.4v-.9a.9.9 0 1 0-1.8 0v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.598H4.5a.9.9 0 0 1-.9-.9V16.8H7.2v2.998Zm0-3.598H3.6v-3H7.2v3Zm0-3.6H3.6V9.598H7.2V12.6ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.498H7.8V16.8h3.6v2.998Zm0-3.598H7.8v-3h3.6v3Zm0-3.6H7.8V9.598h3.6V12.6Zm4.2 7.198H12V16.8h3.6v2.998Zm0-3.598H12v-3h3.6v3Zm0-3.6H12V9.598h3.6V12.6Zm-1.2-6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1a1.5 1.5 0 1 1-2.4 1.2Zm5.399 9.9H16.2v-3H19.8v3Zm0-3.6H16.2V9.598H18.9a.9.9 0 0 1 .9.9V12.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="week">
+    <path d="M24.677 5.323h-3.096V4.146c0-.642-.52-1.146-1.162-1.146a1.161 1.161 0 00-1.16 1.161v1.162h-8.517V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zM9.194 25.452H5.71a1.161 1.161 0 01-1.162-1.162v-12h4.646zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.485a1.935 1.935 0 11-3.097 1.547zm6.968 17.42H9.968V12.29h4.645zm5.42 0h-4.646V12.29h4.645zm-1.55-17.42a1.932 1.932 0 01.775-1.548v1.548a1.161 1.161 0 002.323 0V6.5a1.904 1.904 0 01.774 1.533 1.935 1.935 0 01-3.871 0zm6.969 17.42h-4.646V12.29h3.484a1.161 1.161 0 011.162 1.162z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="assistance">
-    <path fill="#527edb" d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm.74 16.335a1.3 1.3 0 0 1-.89.343 1.346 1.346 0 0 1-.911-.338c-.26-.226-.39-.54-.39-.946 0-.359.126-.661.377-.906.25-.246.558-.368.924-.368.359 0 .661.122.907.368.245.245.367.547.367.906 0 .4-.128.713-.385.941Zm3.194-7.92a3.894 3.894 0 0 1-.701.944c-.271.265-.757.712-1.459 1.339-.164.147-.32.302-.466.466a1.9 1.9 0 0 0-.26.368c-.056.107-.1.218-.134.334-.03.11-.078.306-.14.586-.109.593-.448.89-1.019.89a1.04 1.04 0 0 1-.748-.292c-.203-.193-.304-.481-.304-.864 0-.479.074-.894.223-1.244.14-.34.34-.653.59-.924.245-.265.576-.58.992-.946.365-.319.629-.56.792-.722.161-.161.3-.344.41-.543.111-.2.169-.423.167-.65 0-.457-.17-.842-.51-1.155-.339-.314-.776-.47-1.312-.47-.627 0-1.09.157-1.386.474-.296.317-.547.783-.752 1.399-.195.644-.562.966-1.104.966-.32 0-.59-.112-.809-.338-.22-.225-.329-.469-.329-.731 0-.542.174-1.09.522-1.647.348-.556.855-1.016 1.523-1.381.667-.365 1.445-.548 2.335-.548.826 0 1.556.153 2.19.458.633.305 1.121.72 1.467 1.245.345.524.517 1.094.517 1.71 0 .485-.098.91-.295 1.275Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="month">
+    <path d="M24.677 5.323h-3.096V4.16a1.161 1.161 0 00-2.323 0v1.162h-8.516V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zM9.194 25.449H5.708a1.161 1.161 0 01-1.161-1.161V21.58h4.647zm0-4.643H4.547v-3.87h4.647zm0-4.645H4.547v-3.873h4.647zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.484a1.935 1.935 0 11-3.097 1.548zm6.968 17.417H9.968V21.58h4.645zm0-4.643H9.968v-3.87h4.645zm0-4.645H9.968v-3.873h4.645zm5.42 9.288h-4.646V21.58h4.646zm0-4.643h-4.646v-3.87h4.646zm0-4.645h-4.646v-3.873h4.646zm-1.55-8.129a1.932 1.932 0 01.775-1.548v1.548a1.161 1.161 0 002.323 0V6.484a1.935 1.935 0 11-3.097 1.548zm6.967 12.774h-4.643v-3.87h4.643zm0-4.645h-4.643v-3.873h3.482a1.161 1.161 0 011.161 1.16z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="document">
-    <path d="M15 1.8v3.6c0 .663.478 1.2 1.067 1.2H19.8L15 1.8Zm1.2 6a2.4 2.4 0 0 1-2.4-2.4V1.8H4.2V21a1.2 1.2 0 0 0 1.2 1.2h14.4V7.8h-3.6ZM7.8 9h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 0 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm2.4 3.6H7.8a.6.6 0 1 1 0-1.2h2.4a.6.6 0 0 1 0 1.2Z"/>
+  <symbol fill="#527EDB" viewBox="0 0 20 20" id="tooltip">
+    <path fill-rule="evenodd" d="M10 1.5c-4.694 0-8.5 3.806-8.5 8.5s3.806 8.5 8.5 8.5 8.5-3.806 8.5-8.5-3.806-8.5-8.5-8.5zm.616 13.613c-.202.185-.467.287-.741.285-.28.004-.55-.097-.76-.282-.216-.187-.324-.45-.324-.787 0-.3.105-.552.314-.756.209-.204.465-.306.77-.306.3 0 .551.102.755.306.205.204.307.456.307.756 0 .332-.107.594-.321.784zm2.662-6.601c-.153.29-.35.556-.584.787-.226.221-.63.593-1.216 1.116-.136.122-.266.252-.388.389-.084.093-.157.196-.217.306-.046.089-.083.182-.11.278-.027.093-.066.256-.119.488-.09.495-.372.742-.848.742-.247 0-.455-.081-.624-.243-.168-.161-.253-.401-.253-.72 0-.399.062-.745.186-1.037.117-.283.284-.544.492-.77.204-.22.48-.483.827-.788.304-.266.523-.466.659-.602.134-.134.25-.286.342-.453.093-.165.14-.352.14-.541 0-.38-.142-.701-.425-.963-.283-.261-.648-.392-1.094-.392-.523 0-.908.132-1.155.396s-.456.652-.627 1.165c-.162.537-.469.806-.92.806-.266 0-.49-.094-.674-.282-.183-.187-.274-.39-.274-.609 0-.451.145-.909.435-1.372.29-.464.713-.847 1.269-1.151.556-.305 1.204-.457 1.946-.457.689 0 1.297.127 1.825.382.527.254.934.6 1.222 1.037.288.437.431.912.431 1.426 0 .404-.082.758-.246 1.062z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="live-chat">
-    <path fill-rule="evenodd" d="M19.8 3H2.4v12.6a1.8 1.8 0 0 0 1.8 1.8h2.4v4.2l4.2-4.2h10.8V4.8A1.8 1.8 0 0 0 19.8 3Zm-3.67 5.294h-.265C15.275 6.252 13.768 4.8 12 4.8c-1.768 0-3.276 1.452-3.865 3.494h-.264A1.27 1.27 0 0 0 6.6 9.564v1.271c0 .702.569 1.27 1.27 1.27h.265C8.725 14.149 10.232 15.6 12 15.6c1.768 0 3.276-1.452 3.865-3.494h.264a1.27 1.27 0 0 0 1.271-1.27V9.564a1.27 1.27 0 0 0-1.27-1.27Zm-1.178 4.447h-2.053a.953.953 0 1 0 0 .635h1.698a4.534 4.534 0 0 1-.182.256c-.325.426-.7.758-1.115.988-.806.46-1.794.46-2.6 0a3.624 3.624 0 0 1-1.115-.988 5.066 5.066 0 0 1-.785-1.526 6.335 6.335 0 0 1 0-3.812 5.59 5.59 0 0 1 .172-.464.435.435 0 0 1 .462-.26c.492.071 1.376.34 2.566 1.283 1.442 1.142 2.974.827 3.446.556.032.262.048.526.048.791a6.186 6.186 0 0 1-.294 1.906c-.07.217-.152.429-.248.635Z"/>
+  <symbol fill="currentColor" viewBox="0 0 30 30" id="document">
+    <path fill-rule="evenodd" d="M18.75 2.25v4.5c0 .828.597 1.5 1.333 1.5h4.667l-6-6zm1.5 7.5c-1.657 0-3-1.343-3-3v-4.5h-12v24c0 .828.672 1.5 1.5 1.5h18v-18h-4.5zm-10.5 1.5h10.5c.414 0 .75.336.75.75s-.336.75-.75.75H9.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm0 3h10.5c.414 0 .75.336.75.75s-.336.75-.75.75H9.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm0 3h10.5c.414 0 .75.336.75.75s-.336.75-.75.75H9.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm3 4.5h-3c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h3c.414 0 .75.336.75.75s-.336.75-.75.75z"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="location-pin-compass">
-    <path d="M18.6 8.4a6.6 6.6 0 1 0-12.33 3.277L12 22.2l5.73-10.523A6.57 6.57 0 0 0 18.6 8.4ZM12 13.2a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6Zm2.963-7.576-6.92 3.068 2.474.73.378 2.825 4.068-6.623Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="contact">
+    <path fill-rule="evenodd" d="M 825 125 H 100 V 650 a 75 75 0 0 0 75 75 H 275 V 900 L 450 725 H 900 V 200 A 75 75 0 0 0 825 125 Z M 672.059 345.588 H 661.034 C 636.487 260.512 573.648 200 500 200 S 363.513 260.512 338.966 345.588 H 327.941 A 52.942 52.942 0 0 0 275 398.529 v 52.942 a 52.942 52.942 0 0 0 52.941 52.941 h 11.025 C 363.513 589.488 426.352 650 500 650 s 136.487 -60.512 161.034 -145.588 h 11.025 A 52.942 52.942 0 0 0 725 451.471 V 398.529 A 52.942 52.942 0 0 0 672.059 345.588 Z M 622.983 530.882 H 537.438 a 39.707 39.707 0 1 0 0 26.471 h 70.784 q -3.633 5.5 -7.585 10.666 c -13.568 17.743 -29.2 31.583 -46.476 41.136 a 109.226 109.226 0 0 1 -108.322 0 c -17.271 -9.553 -32.908 -23.393 -46.476 -41.136 c -13.97 -18.268 -24.977 -39.661 -32.715 -63.585 a 263.954 263.954 0 0 1 0 -158.868 q 3.219 -9.948 7.188 -19.3 a 18.115 18.115 0 0 1 19.246 -10.826 C 413.6 318.373 450.416 329.608 500 368.876 c 60.075 47.576 123.906 34.466 143.568 23.146 A 268.978 268.978 0 0 1 645.588 425 a 257.715 257.715 0 0 1 -12.236 79.434 A 230.064 230.064 0 0 1 622.983 530.882 Z"></path>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="mobile-network-coverage">
-    <path d="M18 21.6a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V7.2a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v14.4Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V10.8a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v10.8Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6v-7.2a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v7.2Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V18a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v3.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="locate">
+    <path fill-rule="evenodd" d="M 775 350 C 775 198.125 651.877 75 500 75 S 225 198.125 225 350 a 273.743 273.743 0 0 0 36.235 136.528 h 0 L 500 925 L 738.769 486.528 h 0 A 273.733 273.733 0 0 0 775 350 Z M 500 550 c -110.457 0 -200 -89.543 -200 -200 s 89.543 -200 200 -200 s 200 89.543 200 200 S 610.457 550 500 550 Z M 623.457 234.342 L 335.14 362.17 l 103.051 30.409 l 15.768 117.692 Z"></path>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="child-protection">
-    <path fill-rule="evenodd" d="M15.958 5.402a3.942 3.942 0 0 1-3.946 3.937 3.942 3.942 0 0 1-3.946-3.937 3.942 3.942 0 0 1 3.946-3.938 3.942 3.942 0 0 1 3.946 3.938Zm-.785 3.635a4.831 4.831 0 0 1-6.322 0 4.81 4.81 0 0 0-2.539 4.24v3.5c0 3.14 2.552 5.687 5.7 5.687s5.7-2.546 5.7-5.687v-3.5a4.81 4.81 0 0 0-2.54-4.24Zm-2.77 4.485a1.573 1.573 0 1 1-3.147-.004 1.573 1.573 0 0 1 3.147.004Zm-.21 1.594a2.09 2.09 0 0 1-2.707.017c-.619.359-1 1.02-.999 1.735v1.459a2.367 2.367 0 1 0 4.735 0v-1.459c0-.727-.394-1.398-1.03-1.752Z"/>
+  <symbol fill="currentColor" viewBox="0 0 31 31" id="coverage">
+    <path fill-rule="evenodd" d="M 8.25 26.25 h -4.5 v -9 h 4.5 v 9 Z m 6 0 h -4.5 v -13.5 h 4.5 v 13.5 Z m 6 0 h -4.5 v -18 h 4.5 v 18 Z m 6 0 h -4.5 V 3.75 h 4.5 v 22.5 Z"></path>
+  </symbol>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="protection">
+    <path fill-rule="evenodd" d="M 664.923 225.063 c 0 90.608 -73.615 164.062 -164.423 164.062 S 336.077 315.671 336.077 225.063 S 409.692 61 500.5 61 S 664.923 134.454 664.923 225.063 Z M 632.188 376.531 a 201.295 201.295 0 0 1 -263.376 0 A 200.419 200.419 0 0 0 263 553.187 V 699.021 C 263 829.9 369.333 936 500.5 936 S 738 829.9 738 699.021 V 553.187 A 200.419 200.419 0 0 0 632.188 376.531 Z M 516.793 563.4 a 65.557 65.557 0 1 1 -65.556 -65.625 A 65.591 65.591 0 0 1 516.793 563.4 Z m -8.773 66.439 a 87.1 87.1 0 0 1 -112.756 0.7 a 83.527 83.527 0 0 0 -41.634 72.31 v 60.764 a 98.64 98.64 0 1 0 197.279 0 V 702.849 A 83.526 83.526 0 0 0 508.02 629.835 Z"></path>
   </symbol>
 </svg>

From ab9ebdf0a591fda1f29a6a7a4dab1fbd68b6d614 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Thu, 8 Jun 2023 15:14:07 +0200
Subject: [PATCH 06/39] Change Solaris icons svg in Boosted sprite

---
 site/content/docs/5.3/extend/icons.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 0e8345d332..932244fd51 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -52,14 +52,14 @@ SVG sprites allow you to reference an external file similar to an `<img>` elemen
   <div class="col-md-8">
 
 {{< example class="mt-0 text-primary" >}}
-<!-- todo atre exemple avec fill currentcolor et text success pour la coche ? -->
+<!-- todo other example with fill current color and text success with tick? -->
 <svg width="2em" height="2em" fill="currentColor" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
 </svg>
 <svg width="2em" height="2em" class="text-info" aria-hidden="true">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
 </svg>
-<!-- todo exemple à changer pour accessibilité ? -->
+<!-- todo example to change for accessibility: bg-dark? to test -->
 <svg width="2em" height="2em" class="text-warning" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
 </svg>
@@ -87,7 +87,7 @@ To create your own SVG sprite file, containing only the icons you need:
 </svg>
 ```
 
-<!-- ajouter lien vers utilities > colors -->
+<!-- todo add link to utilities / colors -->
 
 <div class="row my-4">
   <div class="col-md-4">

From 0e952617167ea2963a0d109d17026e5e27fd46f5 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Thu, 8 Jun 2023 15:24:25 +0200
Subject: [PATCH 07/39] add todo for color on tooltip icon

---
 site/content/docs/5.3/components/tooltips.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index 14923fcc4d..cf0ab6d23b 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -151,6 +151,8 @@ With an SVG:
 </button>
 ```
 
+<!-- todo remove color in fill attribute in Boosted sprite -->
+
 ## CSS
 
 ### Variables

From be5e2e062701b1d0d6a28be5472634a27657b8b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Thu, 13 Jul 2023 14:08:12 +0200
Subject: [PATCH 08/39] Change tooltip color to currentColor in Boosted sprite

---
 site/content/docs/5.3/components/tooltips.md       | 4 +---
 site/static/docs/5.3/assets/img/boosted-sprite.svg | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index 87df2205e7..8f116fc0f0 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -134,7 +134,7 @@ With an SVG:
   </a>
 
   <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
-    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" focusable="false" aria-hidden="true">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
     </svg>
     <span class="visually-hidden">Helper</span>
@@ -157,8 +157,6 @@ With an SVG:
 </button>
 ```
 
-<!-- todo remove color in fill attribute in Boosted sprite -->
-
 ## CSS
 
 ### Variables
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index baabbdaabf..7fbacd0f20 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -35,7 +35,7 @@
   <symbol fill="currentColor" viewBox="0 0 30 30" id="month">
     <path d="M24.677 5.323h-3.096V4.16a1.161 1.161 0 00-2.323 0v1.162h-8.516V4.16a1.161 1.161 0 00-2.323 0v1.162H3v19.354A2.323 2.323 0 005.323 27H27V7.645a2.323 2.323 0 00-2.323-2.322zM9.194 25.449H5.708a1.161 1.161 0 01-1.161-1.161V21.58h4.647zm0-4.643H4.547v-3.87h4.647zm0-4.645H4.547v-3.873h4.647zM7.645 8.032a1.932 1.932 0 01.774-1.548v1.548a1.161 1.161 0 002.323 0V6.484a1.935 1.935 0 11-3.097 1.548zm6.968 17.417H9.968V21.58h4.645zm0-4.643H9.968v-3.87h4.645zm0-4.645H9.968v-3.873h4.645zm5.42 9.288h-4.646V21.58h4.646zm0-4.643h-4.646v-3.87h4.646zm0-4.645h-4.646v-3.873h4.646zm-1.55-8.129a1.932 1.932 0 01.775-1.548v1.548a1.161 1.161 0 002.323 0V6.484a1.935 1.935 0 11-3.097 1.548zm6.967 12.774h-4.643v-3.87h4.643zm0-4.645h-4.643v-3.873h3.482a1.161 1.161 0 011.161 1.16z"/>
   </symbol>
-  <symbol fill="#527EDB" viewBox="0 0 20 20" id="tooltip">
+  <symbol fill="currentColor" viewBox="0 0 20 20" id="tooltip">
     <path fill-rule="evenodd" d="M10 1.5c-4.694 0-8.5 3.806-8.5 8.5s3.806 8.5 8.5 8.5 8.5-3.806 8.5-8.5-3.806-8.5-8.5-8.5zm.616 13.613c-.202.185-.467.287-.741.285-.28.004-.55-.097-.76-.282-.216-.187-.324-.45-.324-.787 0-.3.105-.552.314-.756.209-.204.465-.306.77-.306.3 0 .551.102.755.306.205.204.307.456.307.756 0 .332-.107.594-.321.784zm2.662-6.601c-.153.29-.35.556-.584.787-.226.221-.63.593-1.216 1.116-.136.122-.266.252-.388.389-.084.093-.157.196-.217.306-.046.089-.083.182-.11.278-.027.093-.066.256-.119.488-.09.495-.372.742-.848.742-.247 0-.455-.081-.624-.243-.168-.161-.253-.401-.253-.72 0-.399.062-.745.186-1.037.117-.283.284-.544.492-.77.204-.22.48-.483.827-.788.304-.266.523-.466.659-.602.134-.134.25-.286.342-.453.093-.165.14-.352.14-.541 0-.38-.142-.701-.425-.963-.283-.261-.648-.392-1.094-.392-.523 0-.908.132-1.155.396s-.456.652-.627 1.165c-.162.537-.469.806-.92.806-.266 0-.49-.094-.674-.282-.183-.187-.274-.39-.274-.609 0-.451.145-.909.435-1.372.29-.464.713-.847 1.269-1.151.556-.305 1.204-.457 1.946-.457.689 0 1.297.127 1.825.382.527.254.934.6 1.222 1.037.288.437.431.912.431 1.426 0 .404-.082.758-.246 1.062z"/>
   </symbol>
   <symbol fill="currentColor" viewBox="0 0 30 30" id="document">

From a6962dd2d866bc052ad54a8413aa0d1fc227b698 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 24 Aug 2023 17:05:10 +0200
Subject: [PATCH 09/39] use text colors utilities everywhere and update icons
 documentation

---
 site/content/docs/5.3/extend/icons.md | 56 +++++++++++++++++----------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 932244fd51..cc888126b6 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -46,35 +46,51 @@ Embed your icons within the HTML of your page (as opposed to an external image f
 
 You may use an external SVG sprite—a single SVG file containing all your icons—and insert an icon through the `<use>` element.
 
-SVG sprites allow you to reference an external file similar to an `<img>` element, but with the power of `currentColor` for easy theming: see in this example how icons inherit their color from the parent's `.text-primary` class, whereas the second icon get grayed out by `.text-body-secondary`.
+SVG sprites allow you to reference an external file similar to an `<img>` element, but with the power of `currentColor` for easy theming: see in this example how icons inherit their color from the parent's `.text-primary` class, whereas the other icons get their color from [text Orange's colors utilities]({{< docsref "/utilities/colors#oranges-colors" >}}).
 
   </div>
   <div class="col-md-8">
-
-{{< example class="mt-0 text-primary" >}}
-<!-- todo other example with fill current color and text success with tick? -->
-<svg width="2em" height="2em" fill="currentColor" aria-hidden="true" focusable="false">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-</svg>
-<svg width="2em" height="2em" class="text-info" aria-hidden="true">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
-</svg>
-<!-- todo example to change for accessibility: bg-dark? to test -->
-<svg width="2em" height="2em" class="text-warning" aria-hidden="true" focusable="false">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
-</svg>
-<svg width="2em" height="2em" class="text-danger" aria-hidden="true" focusable="false">
-  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
-</svg>
+    {{< example >}}
+<p class="p-2 text-primary">
+  <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
+  </svg>
+</p>
+<p class="bg-dark p-2 text-primary">
+  <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
+  </svg>
+  <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+  </svg>
+</p>
 {{< /example >}}
   </div>
 </div>
 
 To create your own SVG sprite file, containing only the icons you need:
 - download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
-- optimize them with [svgo](https://github.com/svg/svgo)
+- optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
 - include the path in a tag `<symbol>`, inside a SVG file, like below
-- you may add the attributes `fill="#000000"` and/or `fill-rule="evenodd"`, only if needed
+- you may add the attribute `fill-rule="evenodd"`, but only if needed
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">
@@ -87,8 +103,6 @@ To create your own SVG sprite file, containing only the icons you need:
 </svg>
 ```
 
-<!-- todo add link to utilities / colors -->
-
 <div class="row my-4">
   <div class="col-md-4">
 

From 6333040a2b208f99a3ca658a71d57452056e04d1 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Mon, 18 Sep 2023 17:41:33 +0200
Subject: [PATCH 10/39] use warning icon on white (waiting for new accessible
 icon) + enhance documentation on SVGs accessibility

---
 site/content/docs/5.3/extend/icons.md     | 19 ++++++++++++-------
 site/content/docs/5.3/utilities/colors.md |  3 +++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index cc888126b6..414f96d89f 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -64,6 +64,9 @@ SVG sprites allow you to reference an external file similar to an `<img>` elemen
   <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
   </svg>
+  <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+  </svg>
 </p>
 <p class="bg-dark p-2 text-primary">
   <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
@@ -148,17 +151,19 @@ The `viewBox` attribute is required if you wish to resize icons with `background
 
 ### Working with SVGs
 
-SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven’t included these attributes and workarounds in our code.
+{{< callout warning >}}
+SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, **we haven’t systematically included these attributes and workarounds in our code**.
+{{< /callout >}}
 
 Known issues include:
 
-* **Focus handling is broken in Internet Explorer and Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `<svg>` element. [Learn more on Stack Overflow](https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element).
-* **Browsers inconsistently announce SVGs as `<img>` tags with voice assistance.** Include `role="img"` when possible to avoid any issues. [See this article for details](https://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-2).
-* **Safari skips `aria-label` when used non-focusable SVGs.** As such, use `aria-hidden="true"` when embedding the `<svg>` file and use CSS to visually hide an equivalent label. [More details here](https://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-6).
-* **External SVG sprites may not function correctly in Internet Explorer.** Use the [svg4everybody](https://github.com/jonathantneal/svg4everybody) polyfill as needed.
+* On decorative images:
+  * **Focus handling is broken in Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `<svg>` element.
+* On informative images:
+  * **Browsers inconsistently announce `<svg>` tags as images with voice assistance.** Include `role="img"` to avoid any issues.
+  * **Safari skips `aria-label` when using non-focusable SVGs.** Prefer using `aria-labelledby` referencing a `title` element inside `svg` tag.
 
-<!-- Boosted mod: link to Orange Accessibility Guidelines -->
-**Orange Accessibility Guidelines** provides [a deep-dive article regarding SVG accessibility](https://a11y-guidelines.orange.com/en/articles/accessible-svg/).
+For more details, **Orange Accessibility Guidelines** provides [a deep-dive article regarding SVG accessibility](https://a11y-guidelines.orange.com/en/articles/accessible-svg/).
 
 ### Icon font
 
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 135d6e8004..0f314c524f 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -101,6 +101,9 @@ Here are some compliant combinations examples for non-texts elements, such as SV
   <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
   </svg>
+  <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+  </svg>
 </p>
 <p class="bg-dark p-2">
   <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">

From 07b32e730834dc6e90ba40908302dc73acea8953 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Mon, 18 Sep 2023 17:53:47 +0200
Subject: [PATCH 11/39] rearrange doc chapters

---
 site/content/docs/5.3/extend/icons.md | 64 +++++++++++++--------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 414f96d89f..205afe84ea 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Icons
-description: Guidance and suggestions for using Solaris icon libraries with Boosted.
+description: Guidance and suggestions for using Solaris icon library with Boosted.
 group: extend
 aliases:
   - "/docs/extend/icons/"
@@ -10,15 +10,13 @@ toc: true
 
 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
-
 Solaris is a growing library of SVG icons that are designed by [Orange's Global Design Language Team](https://design.orange.com/).
 
 They are not open-source though and should only be used for Orange branded projects. Please refer to our [`NOTICE.txt` file for legal information]({{< param repo >}}/blob/v{{< param current_version >}}/NOTICE.txt).
 
 [Learn more about Solaris]({{< param icons >}}).
 
-### Use Solaris icons
+## Use Solaris icons
 
 <!-- NOTE: this is partially copied from bootstrap Icons homepage → https://icons.getbootstrap.com -->
 Solaris provides both PNGs and SVGs, but we strongly recommend to use SVGs. There are quite a few ways to include SVG icons into your HTML—depending on how your project is setup.
@@ -26,7 +24,7 @@ Solaris provides both PNGs and SVGs, but we strongly recommend to use SVGs. Ther
 <div class="row my-4">
   <div class="col-md-4">
 
-#### Embedded
+### Embedded
 
 Embed your icons within the HTML of your page (as opposed to an external image file). We recommend you use `em` unit for dimensions to ease resizing via `font-size`.
 
@@ -42,7 +40,7 @@ Embed your icons within the HTML of your page (as opposed to an external image f
 <div class="row my-4">
   <div class="col-md-4">
 
-#### Sprite
+### Sprite
 
 You may use an external SVG sprite—a single SVG file containing all your icons—and insert an icon through the `<use>` element.
 
@@ -89,27 +87,10 @@ SVG sprites allow you to reference an external file similar to an `<img>` elemen
   </div>
 </div>
 
-To create your own SVG sprite file, containing only the icons you need:
-- download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
-- optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
-- include the path in a tag `<symbol>`, inside a SVG file, like below
-- you may add the attribute `fill-rule="evenodd"`, but only if needed
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon1">
-    <path d="..."/>
-  </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon2">
-    <path fill-rule="evenodd" d="..."/>
-  </symbol>
-</svg>
-```
-
 <div class="row my-4">
   <div class="col-md-4">
 
-#### External image
+### External image
 
 Copy the Solaris icons SVGs to your directory of choice and reference them like normal images with the `<img>` element.
 
@@ -125,7 +106,7 @@ Copy the Solaris icons SVGs to your directory of choice and reference them like
 <div class="row my-4">
   <div class="col-md-4">
 
-#### CSS
+### CSS
 
 You can also use the SVG within your CSS (be sure to escape any characters with [our internal `escape-svg()` function]({{< docsref "/customize/sass" >}}#escape-svg)).
 
@@ -149,7 +130,7 @@ The `viewBox` attribute is required if you wish to resize icons with `background
 </div>
 
 
-### Working with SVGs
+## About SVGs accessibility
 
 {{< callout warning >}}
 SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, **we haven’t systematically included these attributes and workarounds in our code**.
@@ -165,11 +146,30 @@ Known issues include:
 
 For more details, **Orange Accessibility Guidelines** provides [a deep-dive article regarding SVG accessibility](https://a11y-guidelines.orange.com/en/articles/accessible-svg/).
 
-### Icon font
+## Create a SVG sprite file
+
+To create your own SVG sprite file, containing only the icons you need:
+- download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
+- optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
+- include the path in a tag `<symbol>`, inside a SVG file, like below
+- you may add the attribute `fill-rule="evenodd"`, but only if needed
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon1">
+    <path d="..."/>
+  </symbol>
+  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon2">
+    <path fill-rule="evenodd" d="..."/>
+  </symbol>
+</svg>
+```
+
+## Icon font
 
 You can also embed Solaris icons in an icon font by using [IcoMoon App](https://icomoon.io/app/).
 
-#### Create your own project
+### Create your own project
 
 Go to the top left menu and select `Manage Projects`:
 
@@ -179,7 +179,7 @@ Create a `New Project` and click on `Load`:
 
 <img class="img-thumbnail mb-3" src="/docs/{{< param docs_version >}}/assets/img/icomoon-new-project.png" alt="IcoMoon - New Project" loading="lazy">
 
-#### Select your icons
+### Select your icons
 
 By default there is no icon in this new project.
 
@@ -195,7 +195,7 @@ By default there is no selected icon. Check that you are in selection mode (thir
 
 <img class="img-thumbnail mb-3" width="300" src="/docs/{{< param docs_version >}}/assets/img/icomoon-select-icons.png" alt="IcoMoon - Select Icons" loading="lazy">
 
-#### Download and adapt your font
+### Download and adapt your font
 
 Now you can create your font. Click on `Generate Font` at the bottom right of the page. Depending of the number of selected icons, it can take some time!
 
@@ -203,7 +203,7 @@ Now you can create your font. Click on `Generate Font` at the bottom right of th
 
 Now you have a `Download` button at the bottom right of the page but **WAIT!**.
 
-##### Setting your font preferences
+#### Setting your font preferences
 
 You need to make some changes into `Preferences` to name your font with a name dedicated to your project.
 
@@ -214,7 +214,7 @@ You need to make some changes into `Preferences` to name your font with a name d
 
 <img class="img-thumbnail mb-3" src="/docs/{{< param docs_version >}}/assets/img/icomoon-preferences.png" alt="IcoMoon - Preferences" loading="lazy">
 
-##### Download your font
+#### Download your font
 
 Close the preferences modal.
 

From 04a196f42a96a22a4e47fc29eabc5506bb591063 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Thu, 5 Oct 2023 17:16:52 +0200
Subject: [PATCH 12/39] fix URL and use ordered list

---
 site/content/docs/5.3/extend/icons.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 205afe84ea..ed616a3c9e 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -149,10 +149,10 @@ For more details, **Orange Accessibility Guidelines** provides [a deep-dive arti
 ## Create a SVG sprite file
 
 To create your own SVG sprite file, containing only the icons you need:
-- download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/939811-solaris-icon-library/b/795c81)
-- optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
-- include the path in a tag `<symbol>`, inside a SVG file, like below
-- you may add the attribute `fill-rule="evenodd"`, but only if needed
+1. download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/65c68d-solaris-icon-library/b/639b3c)
+2. optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
+3. include the path in a tag `<symbol>`, inside a SVG file, like below
+4. you may add the attribute `fill-rule="evenodd"`, but only if needed
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg">

From 1f226a1447a5586e1b60299c3b4ec3f3d7645d15 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Fri, 1 Dec 2023 15:30:15 +0100
Subject: [PATCH 13/39] use "icons" site parameter

---
 site/content/docs/5.3/extend/icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index ed616a3c9e..603a27af97 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -149,7 +149,7 @@ For more details, **Orange Accessibility Guidelines** provides [a deep-dive arti
 ## Create a SVG sprite file
 
 To create your own SVG sprite file, containing only the icons you need:
-1. download the icons needed from [ODS website](https://system.design.orange.com/0c1af118d/p/65c68d-solaris-icon-library/b/639b3c)
+1. download the icons needed from [ODS website]({{< param icons >}})
 2. optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
 3. include the path in a tag `<symbol>`, inside a SVG file, like below
 4. you may add the attribute `fill-rule="evenodd"`, but only if needed

From eb9090457b1c47ae4827ac689db4e8c7ec81260c Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 10:52:34 +0100
Subject: [PATCH 14/39] Icons doc totally refunded

---
 hugo.yml                                      |   4 +-
 site/content/docs/5.3/components/buttons.md   |  18 +-
 .../content/docs/5.3/components/title-bars.md |   2 +-
 site/content/docs/5.3/content/tables.md       |  14 +-
 site/content/docs/5.3/dark-mode.md            | 130 ++++----
 site/content/docs/5.3/extend/icons.md         | 295 +++++++++---------
 site/content/docs/5.3/forms/checks-radios.md  |  12 +-
 site/content/docs/5.3/utilities/colors.md     |   6 +-
 site/layouts/partials/header.html             |   1 +
 .../docs/5.3/assets/img/boosted-cross.svg     |   4 +-
 .../docs/5.3/assets/img/boosted-sprite.svg    |  77 ++---
 .../docs/5.3/assets/img/boosted-warning.svg   |   4 +
 12 files changed, 283 insertions(+), 284 deletions(-)
 create mode 100644 site/static/docs/5.3/assets/img/boosted-warning.svg

diff --git a/hugo.yml b/hugo.yml
index e418830773..9c8721b0ff 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -70,7 +70,9 @@ params:
   repo:                             "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap"
   twitter:                          "getbootstrap"
   blog:                             "https://blog.getbootstrap.com/"
-  icons:                            "https://oran.ge/icons"
+  icons:                            "https://design.orange.com/0c1af118d/p/23d499-solaris-icons"
+  icons_license:                    "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
+  icons_doc:                        "https://design.orange.com/0c1af118d/p/92bb17-usage"
   bootstrap:                        "https://getbootstrap.com"
   ods:
     web:                            "https://system.design.orange.com/0c1af118d/n/76065f"
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index fd387ea5be..6057b3e4d1 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -70,19 +70,19 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
 {{< example >}}
 <button type="button" class="btn btn-primary btn-sm">
   <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   Primary
 </button>
 <button type="button" class="btn btn-primary">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   Primary
 </button>
 <button type="button" class="btn btn-primary btn-lg">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   Primary
 </button>
@@ -95,19 +95,19 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
 {{< example >}}
 <button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
   <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
 <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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
 <button type="button" class="btn btn-icon btn-outline-secondary btn-lg">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
@@ -120,19 +120,19 @@ Use `.btn-no-outline` to get a borderless button as default state, and a consist
 {{< example >}}
 <button type="button" class="btn btn-icon btn-no-outline btn-sm">
   <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">No outline</span>
 </button>
 <button type="button" class="btn btn-icon btn-no-outline">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">No outline</span>
 </button>
 <button type="button" class="btn btn-icon btn-no-outline btn-lg">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">No outline</span>
 </button>
diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md
index 4d6a9170e7..0562f2d29a 100644
--- a/site/content/docs/5.3/components/title-bars.md
+++ b/site/content/docs/5.3/components/title-bars.md
@@ -83,7 +83,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht
 <div class="bg-supporting-purple title-bar" data-bs-theme="light">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
-    <svg aria-hidden="true" focusable="false" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"/></svg>
+    <svg aria-hidden="true" focusable="false" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"/></svg>
   </div>
 </div>
 {{</ example >}}
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index 417ffd73f3..bba89e0b97 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -979,7 +979,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
           <td>
             <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg1" class="me-2">
               <title id="svg1">Document</title>
-              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
             Cell text
           </td>
@@ -1016,7 +1016,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
           <td>
             <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg2" class="me-2">
               <title id="svg2">Document</title>
-              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
             Cell text
           </td>
@@ -1036,7 +1036,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
           <td>
             <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg3" class="me-2">
               <title id="svg3">Document</title>
-              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
             Cell text
           </td>
@@ -1056,7 +1056,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
           <td>
             <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg4" class="me-2">
               <title id="svg4">Document</title>
-              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
             Cell text
           </td>
@@ -1076,7 +1076,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
           <td>
             <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg5" class="me-2">
               <title id="svg5">Document</title>
-              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
             Cell text
           </td>
@@ -1096,7 +1096,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
           <td>
             <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg6" class="me-2">
               <title id="svg6">Document</title>
-              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
             Cell text
           </td>
@@ -1121,7 +1121,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
     <td>
       <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg1" class="me-2">
         <title id="svg1">Document</title>
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"></use>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
       </svg>
       Cell text
     </td>
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 70fc794200..e99933ebea 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -614,12 +614,12 @@ sitemap_exclude: true
   <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
   <button type="button" class="btn btn-outline-dark">Outline dark</button>
   <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
-  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button">Large button</button></div>
@@ -665,12 +665,12 @@ sitemap_exclude: true
   <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
   <button type="button" class="btn btn-outline-dark">Outline dark</button>
   <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
-  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button">Large button</button></div>
@@ -716,12 +716,12 @@ sitemap_exclude: true
   <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
   <button type="button" class="btn btn-outline-dark">Outline dark</button>
   <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
-  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button">Large button</button></div>
@@ -767,12 +767,12 @@ sitemap_exclude: true
   <button type="button" class="btn btn-outline-light" disabled data-bs-theme="dark">Outline light</button>
   <button type="button" class="btn btn-outline-dark" data-bs-theme="dark">Outline dark</button>
   <button type="button" class="btn btn-outline-dark" disabled data-bs-theme="dark">Outline dark</button>
-  <button type="button" class="btn btn-primary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-primary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-primary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-theme="dark">Large button</button></div>
@@ -818,12 +818,12 @@ sitemap_exclude: true
   <button type="button" class="btn btn-outline-light" disabled data-bs-theme="light">Outline light</button>
   <button type="button" class="btn btn-outline-dark" data-bs-theme="light">Outline dark</button>
   <button type="button" class="btn btn-outline-dark" disabled data-bs-theme="light">Outline dark</button>
-  <button type="button" class="btn btn-primary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-primary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-primary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg>Primary</button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
+  <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-theme="light">Large button</button></div>
@@ -5419,7 +5419,7 @@ sitemap_exclude: true
   </div>
   <div class="sticker sticker-sm">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
     </svg>
     <p class="mb-2">
       <span class="sticker-fs-m">Free delivery</span>
@@ -5440,7 +5440,7 @@ sitemap_exclude: true
   </div>
   <div class="sticker sticker-sm">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
     </svg>
     <p class="mb-2">
       <span class="sticker-fs-m">Free delivery</span>
@@ -5461,7 +5461,7 @@ sitemap_exclude: true
   </div>
   <div class="sticker sticker-sm">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
     </svg>
     <p class="mb-2">
       <span class="sticker-fs-m">Free delivery</span>
@@ -5482,7 +5482,7 @@ sitemap_exclude: true
   </div>
   <div class="sticker sticker-sm" data-bs-theme="dark">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
     </svg>
     <p class="mb-2">
       <span class="sticker-fs-m">Free delivery</span>
@@ -5503,7 +5503,7 @@ sitemap_exclude: true
   </div>
   <div class="sticker sticker-sm" data-bs-theme="light">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
     </svg>
     <p class="mb-2">
       <span class="sticker-fs-m">Free delivery</span>
@@ -8348,21 +8348,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
     <label class="btn btn-icon btn-toggle" for="option5">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option6">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option7">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8371,21 +8371,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="iconsNoOutline" id="option8" autocomplete="off" checked>
     <label class="btn btn-icon btn-no-outline" for="option8">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline" id="option9" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option9">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline" id="option10" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option10">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8455,21 +8455,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="icons1" id="option51" autocomplete="off" checked>
     <label class="btn btn-icon btn-toggle" for="option51">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="icons1" id="option61" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option61">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="icons1" id="option71" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option71">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8478,21 +8478,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="iconsNoOutline1" id="option81" autocomplete="off" checked>
     <label class="btn btn-icon btn-no-outline" for="option81">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline1" id="option91" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option91">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline1" id="option01" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option01">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8562,21 +8562,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="icons2" id="option52" autocomplete="off" checked>
     <label class="btn btn-icon btn-toggle" for="option52">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="icons2" id="option62" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option62">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="icons2" id="option72" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option72">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8585,21 +8585,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="iconsNoOutline2" id="option82" autocomplete="off" checked>
     <label class="btn btn-icon btn-no-outline" for="option82">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline2" id="option92" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option92">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline2" id="option02" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option02">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8669,21 +8669,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="icons3" id="option53" autocomplete="off" checked>
     <label class="btn btn-icon btn-toggle" for="option53" data-bs-theme="dark">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="icons3" id="option63" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option63" data-bs-theme="dark">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="icons3" id="option73" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option73" data-bs-theme="dark">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8692,21 +8692,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="iconsNoOutline3" id="option83" autocomplete="off" checked>
     <label class="btn btn-icon btn-no-outline" for="option83" data-bs-theme="dark">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline3" id="option93" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option93" data-bs-theme="dark">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline3" id="option03" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option03" data-bs-theme="dark">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8776,21 +8776,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="icons4" id="option54" autocomplete="off" checked>
     <label class="btn btn-icon btn-toggle" for="option54" data-bs-theme="light">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="icons4" id="option64" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option64" data-bs-theme="light">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="icons4" id="option74" autocomplete="off">
     <label class="btn btn-icon btn-toggle" for="option74" data-bs-theme="light">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
@@ -8799,21 +8799,21 @@ sitemap_exclude: true
     <input type="radio" class="btn-check" name="iconsNoOutline4" id="option84" autocomplete="off" checked>
     <label class="btn btn-icon btn-no-outline" for="option84" data-bs-theme="light">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
       </svg>
       <span class="visually-hidden">Day</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline4" id="option94" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option94" data-bs-theme="light">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
       </svg>
       <span class="visually-hidden">Week</span>
     </label>
     <input type="radio" class="btn-check" name="iconsNoOutline4" id="option04" autocomplete="off">
     <label class="btn btn-icon btn-no-outline" for="option04" data-bs-theme="light">
       <svg width="1.25rem" height="1.25rem" fill="currentColor">
-        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
       </svg>
       <span class="visually-hidden">Month</span>
     </label>
diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 603a27af97..0e0c044aff 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -10,221 +10,208 @@ toc: true
 
 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 is a growing library of SVG icons that are designed by [Orange's Global Design Language Team](https://design.orange.com/).
+[Solaris icons library]({{< param icons >}}) is a growing library of icons that are designed by [Orange's Group Design Team](https://system.design.orange.com/).
+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 Icon Library user documentation for full design and development guidelines.
 
-They are not open-source though and should only be used for Orange branded projects. Please refer to our [`NOTICE.txt` file for legal information]({{< param repo >}}/blob/v{{< param current_version >}}/NOTICE.txt).
-
-[Learn more about Solaris]({{< param icons >}}).
+They are not open-source though and should only be used for Orange branded projects. Please refer to the [icons license file]({{< param icons_license >}}) for legal information.
 
 ## Use Solaris icons
 
-<!-- NOTE: this is partially copied from bootstrap Icons homepage → https://icons.getbootstrap.com -->
-Solaris provides both PNGs and SVGs, but we strongly recommend to use SVGs. There are quite a few ways to include SVG icons into your HTML—depending on how your project is setup.
-
-<div class="row my-4">
-  <div class="col-md-4">
-
-### Embedded
+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 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" >}})
 
-Embed your icons within the HTML of your page (as opposed to an external image file). We recommend you use `em` unit for dimensions to ease resizing via `font-size`.
+See Solaris icons library [develop documentation]({{< param icons_doc >}}) for complete information about the different formats and their pros and cons.
 
-  </div>
-  <div class="col-md-8">
+All icons can be retrieved easily in any of these formats in the Solaris icons finder, except for the specific case of [warning icon]({{< docsref "extend/icons#warning-icon" >}}) which can be copied below.
 
-{{< example class="mt-0" >}}
-<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 9 14" role="img" aria-label="Left arrow"><path d="M9 2L7 0 0 7l7 7 2-2-5-5 5-5z"/></svg>
-{{< /example >}}
-  </div>
-</div>
+### SVG Sprite
 
-<div class="row my-4">
-  <div class="col-md-4">
+Using the Solaris icons finder, you can generate a 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]({{< docsref "/utilities/colors" >}}) or local style.
 
-### Sprite
-
-You may use an external SVG sprite—a single SVG file containing all your icons—and insert an icon through the `<use>` element.
-
-SVG sprites allow you to reference an external file similar to an `<img>` element, but with the power of `currentColor` for easy theming: see in this example how icons inherit their color from the parent's `.text-primary` class, whereas the other icons get their color from [text Orange's colors utilities]({{< docsref "/utilities/colors#oranges-colors" >}}).
-
-  </div>
-  <div class="col-md-8">
-    {{< example >}}
-<p class="p-2 text-primary">
+{{< example >}}
+<p class="p-2" data-bs-theme="light">
   <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
   </svg>
-  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
+  <svg width="1.875em" height="1.875em" class="text-body-tertiary" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/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/{{< param docs_version >}}/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/{{< param docs_version >}}/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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#error-severe"/>
   </svg>
 </p>
-<p class="bg-dark p-2 text-primary">
+<p class="p-2" data-bs-theme="dark">
   <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
   </svg>
-  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
+  <svg width="1.875em" height="1.875em" class="text-body-tertiary" aria-hidden="true" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/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/{{< param docs_version >}}/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/{{< param docs_version >}}/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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#error-severe"/>
   </svg>
 </p>
 {{< /example >}}
-  </div>
-</div>
-
-<div class="row my-4">
-  <div class="col-md-4">
-
-### External image
-
-Copy the Solaris icons SVGs to your directory of choice and reference them like normal images with the `<img>` element.
-
-  </div>
-  <div class="col-md-8">
-
-{{< example class="mt-0" >}}
-<img src="/docs/{{< param docs_version >}}/assets/img/boosted-cross.svg" alt="" aria-hidden="true" width="32" height="32">
-{{< /example >}}
-  </div>
-</div>
-
-<div class="row my-4">
-  <div class="col-md-4">
-
-### CSS
-
-You can also use the SVG 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.
-
-The `viewBox` attribute is required if you wish to resize icons with `background-size`. Note that the `xmlns` attribute is required.
-
-  </div>
-  <div class="col-md-8">
 
-```css
-.icon-warning::before {
-  display: inline-block;
-  content: "";
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath fill='%23fc0' d='M15 0a15 15 0 100 30 15 15 0 000-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-size: 1.625rem;
-}
+To speed up loading, the sprite file can be preloaded in the `<head>` of the page:
+```html
+<link rel="preload" href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml"></link>
 ```
-  </div>
-</div>
 
+### Web font
 
-## About SVGs accessibility
+Using the Solaris icons finder, you can generate a Web font containing all your icons and use it like a classic font.
+Icons can be styled through CSS properties like `font-size` and `color`. However, for websites needing more than 20 icons, you may consider using a web font instead of a SVG sprite.
 
-{{< callout warning >}}
-SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, **we haven’t systematically included these attributes and workarounds in our code**.
-{{< /callout >}}
+It is not the preferred solution, so it is not used in Boosted and cannot be documented here.
 
-Known issues include:
+### Inline SVG
 
-* On decorative images:
-  * **Focus handling is broken in Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `<svg>` element.
-* On informative images:
-  * **Browsers inconsistently announce `<svg>` tags as images with voice assistance.** Include `role="img"` to avoid any issues.
-  * **Safari skips `aria-label` when using non-focusable SVGs.** Prefer using `aria-labelledby` referencing a `title` element inside `svg` tag.
+You can embed your icons directly within the HTML of your page (as opposed to an external image file). This technique should only be used if you have a few icons to render, and not rendering the same icon multiple times.
 
-For more details, **Orange Accessibility Guidelines** provides [a deep-dive article regarding SVG accessibility](https://a11y-guidelines.orange.com/en/articles/accessible-svg/).
+{{< example class="mt-0" >}}
+<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"></path>
+</svg>
+{{< /example >}}
 
-## Create a SVG sprite file
+The `fill="currentColor"` attribute is required if you want to change the color of the icons on the fly, and that the foreground color changes in dark/light mode.
 
-To create your own SVG sprite file, containing only the icons you need:
-1. download the icons needed from [ODS website]({{< param icons >}})
-2. optimize them with [svgo](https://github.com/svg/svgo) and remove useless attributes
-3. include the path in a tag `<symbol>`, inside a SVG file, like below
-4. you may add the attribute `fill-rule="evenodd"`, but only if needed
+### SVG external image
 
-```html
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon1">
-    <path d="..."/>
-  </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="my-icon2">
-    <path fill-rule="evenodd" d="..."/>
-  </symbol>
-</svg>
-```
+You can download the Solaris icons SVGs from the Solaris icons finder, copy them into your project and reference them like normal images with the `<img>` element.
 
-## Icon font
+{{< example class="mt-0" >}}
+<img src="/docs/{{< param docs_version >}}/assets/img/boosted-cross.svg" alt="" width="32" height="32">
+{{< /example >}}
 
-You can also embed Solaris icons in an icon font by using [IcoMoon App](https://icomoon.io/app/).
+### CSS background SVG
 
-### Create your own project
+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)).
 
-Go to the top left menu and select `Manage Projects`:
+When no dimensions are specified via `width` and `height` on the `<svg>`, the icon will fill the available space.
 
-<img class="img-thumbnail mb-3" width="300" src="/docs/{{< param docs_version >}}/assets/img/icomoon-manage-projects.png" alt="IcoMoon - Manage Projects menu" loading="lazy">
+Note that the `xmlns` attribute is required.
 
-Create a `New Project` and click on `Load`:
+{{< example class="mt-0" >}}
+<style>
+  .icon-home::before {
+    content:"";
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3c/svg%3e");
+    background-size: contain;
+    vertical-align: bottom;
+  }
+</style>
+<span class="icon-home"></span>
+{{< /example >}}
 
-<img class="img-thumbnail mb-3" src="/docs/{{< param docs_version >}}/assets/img/icomoon-new-project.png" alt="IcoMoon - New Project" loading="lazy">
+## Modify icons color
 
-### Select your icons
+For SVGs, we recommend setting `fill="currentColor"` on the `<svg>` tag: it will make the icon inherit color from its parent container.
 
-By default there is no icon in this new project.
+Then, you can:
+- use [text color utilities classes]({{< docsref "utilities/colors" >}}) like `.text-success` that change current color value
+- specify a color using CSS variables like: `style="color: var(--bs-success)"`
 
-Click on `Import icons` and import icons in SVG.
+## Icons accessibility
 
 {{< callout warning >}}
-SVG icons must be within a square layout to preserve icons consistency. Otherwise you will have some surprises!
+Given the numerous ways in which icons can be used and considering Boosted website is a documentation, we haven’t always included accessibility attributes in our code.
+For more details, **Orange Accessibility Guidelines** provides [a deep-dive article regarding SVG accessibility](https://a11y-guidelines.orange.com/en/articles/accessible-svg/).
 {{< /callout >}}
 
-<img class="img-thumbnail mb-3" width="300" src="/docs/{{< param docs_version >}}/assets/img/icomoon-import-icons.png" alt="IcoMoon - Import Icons" loading="lazy">
-
-By default there is no selected icon. Check that you are in selection mode (third icon in the top bar, after `Import Icons` and the icon library) and then click on the icons to embed in your font. When an icon is selected, its border becomes yellow.
-
-<img class="img-thumbnail mb-3" width="300" src="/docs/{{< param docs_version >}}/assets/img/icomoon-select-icons.png" alt="IcoMoon - Select Icons" loading="lazy">
+#### 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
 
-### Download and adapt your font
+#### 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).
+For this, you use the `.visually-hidden` class.
 
-Now you can create your font. Click on `Generate Font` at the bottom right of the page. Depending of the number of selected icons, it can take some time!
-
-<img class="img-thumbnail mb-3" src="/docs/{{< param docs_version >}}/assets/img/icomoon-generate-font.png" alt="IcoMoon - Generate Font" loading="lazy">
-
-Now you have a `Download` button at the bottom right of the page but **WAIT!**.
-
-#### Setting your font preferences
-
-You need to make some changes into `Preferences` to name your font with a name dedicated to your project.
-
-1. Click on `Preferences` on the top menu bar.
-2. The default font name is `icomoon`. Rename it for you project (e.g. `myproject-icons`) and customize the class prefix by adding your project name to create a unique CSS selector.
-3. You can also change the version, get SCSS variables, etc.
-4. Don't forget to **uncheck IE8 support**!
+{{< example class="mt-0" >}}
+<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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
+  </svg>
+  <span class="visually-hidden">Settings</span>
+</button>
+{{< /example >}}
 
-<img class="img-thumbnail mb-3" src="/docs/{{< param docs_version >}}/assets/img/icomoon-preferences.png" alt="IcoMoon - Preferences" loading="lazy">
+## Warning icon
 
-#### Download your font
+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.
 
-Close the preferences modal.
+### SVG sprite
+SVG symbol to insert into your SVG sprite:
+```xml
+<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>
+```
 
-You are now ready to download your font with the button at the bottom right of the page.
+### Web font
+Please note that this icon cannot be used in a Web font, due to its two colors.
 
-<img class="img-thumbnail mb-3" src="/docs/{{< param docs_version >}}/assets/img/icomoon-download-font.png" alt="IcoMoon - Download Font" loading="lazy">
+### Inline SVG
+SVG code for an inline SVG:
+{{< example class="mt-0" >}}
+<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>
+{{< /example >}}
 
-The zip file will be named in function of what has been defined in the preferences modal (e.g. `myproject-icons-v1.0.zip`).
+### SVG external image
+Code for an external SVG image:
+{{< example class="mt-0" >}}
+<img src="/docs/{{< param docs_version >}}/assets/img/boosted-warning.svg" alt="" width="32" height="32">
+{{< /example >}}
 
-Unzip it:
-* `demo.html` and `demo-files` fold offer a sample page displaying the icons — they are not mandatory for your project.
-* `fonts` folder contains `myproject-icons.woff`. You can create the `woff2` corresponding file by using [Everything Fonts](https://everythingfonts.com/).
-* `style.css` contains all the CSS classes. Rename it to `myproject-icons.css` and adapt it for SCSS if needed.
+### CSS background SVG
+CSS code for background SVG image:
+{{< example class="mt-0" >}}
+<style>
+  .icon-warning {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3cpath 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'/%3e%3c/svg%3e");
+    background-size: contain;
+  }
+</style>
+<span class="icon-warning"></span>
+{{< /example >}}
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index 32d2b8c630..fb1c2484ee 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -303,21 +303,21 @@ Add [`.btn-icon`]({{< docsref "/components/buttons" >}}#icon-only) with an [embe
   <input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
   <label class="btn btn-icon btn-toggle" for="option5">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
     </svg>
     <span class="visually-hidden">Day</span>
   </label>
   <input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
   <label class="btn btn-icon btn-toggle" for="option6">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
     </svg>
     <span class="visually-hidden">Week</span>
   </label>
   <input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
   <label class="btn btn-icon btn-toggle" for="option7">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
     </svg>
     <span class="visually-hidden">Month</span>
   </label>
@@ -331,21 +331,21 @@ Drop borders using `.btn-no-outline`, too.
   <input type="radio" class="btn-check" name="iconsNoOutline" id="option8" autocomplete="off" checked>
   <label class="btn btn-icon btn-no-outline" for="option8">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-day"/>
     </svg>
     <span class="visually-hidden">Day</span>
   </label>
   <input type="radio" class="btn-check" name="iconsNoOutline" id="option9" autocomplete="off">
   <label class="btn btn-icon btn-no-outline" for="option9">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-week"/>
     </svg>
     <span class="visually-hidden">Week</span>
   </label>
   <input type="radio" class="btn-check" name="iconsNoOutline" id="option10" autocomplete="off">
   <label class="btn btn-icon btn-no-outline" for="option10">
     <svg width="1.25rem" height="1.25rem" fill="currentColor">
-      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#calendar-month"/>
     </svg>
     <span class="visually-hidden">Month</span>
   </label>
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 1f6a76a2ed..f8fb39f65a 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -98,16 +98,16 @@ Here are some compliant combinations examples for non-texts elements, such as SV
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
   </svg>
   <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#error-severe"/>
   </svg>
   <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
   </svg>
   <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning-important-accessible"/>
   </svg>
 </p>
 {{< /example >}}
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index 20e7ac08b6..ffb639acf7 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -21,6 +21,7 @@
 <link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/dist/fonts/HelvNeue55_W1G.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 <link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/dist/fonts/HelvNeue75_W1G.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
+<link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml"></link>
 <!-- end mod -->
 
 {{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
diff --git a/site/static/docs/5.3/assets/img/boosted-cross.svg b/site/static/docs/5.3/assets/img/boosted-cross.svg
index 6dcc204214..dc54683a11 100644
--- a/site/static/docs/5.3/assets/img/boosted-cross.svg
+++ b/site/static/docs/5.3/assets/img/boosted-cross.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-  <path d="M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1000 1000">
+  <path d="M750 333.333 666.667 250 500 416.667 333.333 250 250 333.333 416.667 500 250 666.667 333.333 750 500 583.333 666.667 750 750 666.667 583.333 500z"></path>
 </svg>
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index 6f4a9ed957..f059f509d4 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -1,56 +1,61 @@
 <svg xmlns="http://www.w3.org/2000/svg">
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="success">
-    <path d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm5.33 6.36-6.112 7.68a.951.951 0 0 1-1.491 0L6.67 12a.963.963 0 0 1 .07-1.279l.382-.384a.95.95 0 0 1 1.297-.05l1.861 2.073 5.65-5.5a.954.954 0 0 1 1.608.7c0 .218-.074.43-.21.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="tick-confirmation">
+    <path d="M500 75C265.279 75 75 265.279 75 500s190.279 425 425 425 425-190.279 425-425S734.721 75 500 75m222.051 264.988-254.642 320-.007-.006a39.635 39.635 0 0 1-62.125 0l-.006.005-127.321-160 .006-.006a40.14 40.14 0 0 1 2.928-53.267l15.915-16a39.61 39.61 0 0 1 54.022-2.077l.006-.008L428.382 515 663.77 285.818l.006.008A39.734 39.734 0 0 1 730.77 315a39.95 39.95 0 0 1-8.726 24.981Z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="info">
-    <path d="M12 1.812c-5.633 0-10.2 4.567-10.2 10.2 0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm0 2.4a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Zm3 14.4H9.6v-.618l.127-.004c.373-.012.65-.118.825-.315.062-.071.167-.314.167-1.132v-5.452c0-.778-.109-1.07-.2-1.18-.128-.153-.396-.243-.796-.268L9.6 9.636v-.624h4.2v7.531c0 .778.203 1.071.294 1.18.128.153.376.243.783.267l.123.008v.614Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="info">
+    <path d="M500 75.5c-234.72 0-425 190.28-425 425s190.28 425 425 425 425-190.28 425-425-190.28-425-425-425m0 100a75 75 0 1 1-75 75 75 75 0 0 1 75-75m125 600H400v-25.737l5.287-.167c15.555-.5 27.115-4.919 34.368-13.136 2.576-2.972 6.956-13.1 6.956-47.153v-227.2c0-32.392-4.523-44.6-8.311-49.141-5.359-6.391-16.516-10.147-33.17-11.156l-5.13-.31v-26h175v313.807c0 32.415 8.457 44.618 12.24 49.142 5.34 6.389 15.68 10.142 32.625 11.152l5.135.3v25.6Z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="warning">
-    <path d='M19.875 21H4.1a2.25 2.25 0 0 1-1.946-3.384l.019-.031v-.002l7.868-13.467a2.255 2.255 0 0 1 3.892 0l7.887 13.5A2.249 2.249 0 0 1 19.875 21Z'/><path fill="#000" d='M12.012 18.6a1.14 1.14 0 1 1 0-2.28 1.14 1.14 0 0 1 0 2.28Zm1.137-10.177-.377 6.195c0 .42-.34.577-.76.577s-.76-.157-.76-.577l-.378-6.21a1.14 1.14 0 1 1 2.275.014Z'/>
+  <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>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="danger">
-    <path d="m21.832 17.617-7.886-13.5a2.256 2.256 0 0 0-3.892 0L2.186 17.583v.002l-.02.032h.001A2.248 2.248 0 0 0 4.113 21h15.773a2.25 2.25 0 0 0 1.946-3.383Zm-6.88-.714a.823.823 0 0 1-1.163 0l-1.93-1.932-1.93 1.932a.823.823 0 0 1-1.174-1.155l.01-.01 1.93-1.93-1.861-1.863a.823.823 0 0 1 1.163-1.164l1.862 1.862 1.861-1.862a.823.823 0 0 1 1.174 1.153l-.01.011-1.862 1.862 1.93 1.931a.824.824 0 0 1 0 1.165Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="error-severe">
+    <path d="M863.641 699.619h.008L571.982 199.365h-.008a83.294 83.294 0 0 0-143.948 0h-.007L137.068 698.386l-.031.053-.685 1.176h.007A83.369 83.369 0 0 0 208.334 825h583.333a83.369 83.369 0 0 0 71.974-125.381M628.9 689.894a34.27 34.27 0 0 1-48.477 0L500 609.432l-80.423 80.462a34.285 34.285 0 1 1-48.469-48.5l80.421-80.454-77.562-77.6a34.288 34.288 0 0 1 48.479-48.5l77.56 77.6 77.559-77.6a34.287 34.287 0 1 1 48.474 48.5l-77.56 77.6 80.421 80.451a34.32 34.32 0 0 1 0 48.503" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="buy">
-    <path d="M21.205 9.31h-5.317V6.553c0-2.113-1.716-3.841-3.828-3.841S8.232 4.44 8.232 6.552V9.31H2.76a1.2 1.2 0 0 0-1.03 1.817l4.63 10.185h11.16l4.714-10.185c.108-.18.206-.391.206-.617 0-.663-.572-1.2-1.235-1.2ZM3.96 11.71h4.2l.462 3H5.375l-1.415-3Zm3.6 7.802L6.12 16.51h2.778l.462 3h-1.8Zm5.4 0h-1.92l-.48-3.001h2.88l-.48 3Zm.72-4.801h-3.24l-.48-3.001h4.08l-.36 3Zm.408-5.401h-4.055l-.003-2.757a2.03 2.03 0 1 1 4.059 0l-.001 2.757Zm2.352 10.202h-1.807l.487-3.001h2.76l-1.44 3Zm2.185-4.801h-3.282l.377-3.001h4.204l-1.299 3Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="buy">
+    <path d="M883.53 387.9H662V273.033C662 185.015 590.5 113 502.5 113S343 185.015 343 273.033V387.9H115a50.016 50.016 0 0 0-42.88 75.736L265 888h465l196.41-424.367c4.52-7.512 8.59-16.314 8.59-25.726 0-27.615-23.85-50.007-51.47-50.007M165 487.918h175l19.23 125.025H223.95Zm150 325.066-60-125.025h115.77L390 812.984zm225 0h-80l-20-125.025h120Zm30-200.041H435l-20-125.025h170ZM586.99 387.9H418.05l-.13-114.864a84.556 84.556 0 1 1 169.11 0ZM685 812.984h-75.31L630 687.959h115Zm91.05-200.041H639.3L655 487.918h175.17Z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="search">
-    <path d="m21.415 19.665-5.416-5.416A7.496 7.496 0 1 0 14.25 16l5.416 5.416a.601.601 0 0 0 .848 0l.902-.902a.602.602 0 0 0 0-.848ZM9.896 14.994a5.097 5.097 0 1 1 0-10.195 5.097 5.097 0 0 1 0 10.195Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="search">
+    <path d="M892.285 819.383 666.631 593.728a310.8 310.8 0 0 0 58.05-181.388c0-172.5-139.839-312.34-312.341-312.34S100 239.838 100 412.34s139.838 312.341 312.34 312.341a310.9 310.9 0 0 0 181.4-58.05l225.643 225.644a25.053 25.053 0 0 0 35.342 0l37.56-37.55a25.07 25.07 0 0 0 0-35.342M412.34 624.732c-117.3 0-212.391-95.092-212.391-212.392S295.04 199.949 412.34 199.949 624.732 295.04 624.732 412.34 529.64 624.732 412.34 624.732" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="delete">
-    <path d="M19.62 16.228a1.2 1.2 0 0 1 0 1.696l-1.696 1.696a1.2 1.2 0 0 1-1.696 0l-4.24-4.24-4.24 4.24a1.2 1.2 0 0 1-1.696 0l-1.696-1.696a1.2 1.2 0 0 1 0-1.696l4.24-4.24-4.24-4.24a1.2 1.2 0 0 1 0-1.696l1.696-1.696a1.2 1.2 0 0 1 1.696 0l4.24 4.24 4.24-4.24a1.2 1.2 0 0 1 1.696 0l1.696 1.696a1.2 1.2 0 0 1 0 1.696l-4.24 4.24 4.24 4.24Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="delete">
+    <path d="M817.493 676.165a49.977 49.977 0 0 1 0 70.664l-70.664 70.664a49.977 49.977 0 0 1-70.664 0L499.5 640.828 322.835 817.493a49.977 49.977 0 0 1-70.664 0l-70.664-70.664a49.977 49.977 0 0 1 0-70.664L358.172 499.5 181.507 322.835a49.977 49.977 0 0 1 0-70.664l70.664-70.664a49.977 49.977 0 0 1 70.664 0L499.5 358.172l176.665-176.665a49.977 49.977 0 0 1 70.664 0l70.664 70.664a49.977 49.977 0 0 1 0 70.664L640.828 499.5Z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="settings">
-    <path d="M19.862 12.012c0-2.655 2.897-.646 1.548-3.902-1.35-3.257-1.977.211-3.855-1.666-1.877-1.877 1.592-2.504-1.664-3.853-3.257-1.349-1.249 1.547-3.903 1.547-2.655 0-.646-2.896-3.902-1.547-3.257 1.349.211 1.976-1.666 3.853-1.877 1.877-2.505-1.59-3.854 1.666-1.35 3.256 1.548 1.247 1.548 3.902 0 2.655-2.897.646-1.548 3.902 1.35 3.257 1.977-.211 3.854 1.665 1.877 1.877-1.591 2.505 1.666 3.854 3.256 1.349 1.247-1.547 3.902-1.547 2.654 0 .646 2.896 3.903 1.547 3.256-1.349-.213-1.977 1.664-3.854 1.878-1.876 2.505 1.592 3.855-1.665 1.349-3.256-1.548-1.247-1.548-3.902ZM12 7.224a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="settings">
+    <path d="M827.568 500.5c0-110.61 120.715-26.921 64.516-162.6-56.231-135.681-82.391 8.823-160.606-69.384s66.333-104.365-69.36-160.562c-135.718-56.2-52.024 64.481-162.61 64.481-110.619 0-26.921-120.68-162.612-64.481s8.827 82.349-69.391 160.562-104.372-66.3-160.575 69.384c-56.23 135.679 64.486 51.99 64.486 162.6S50.7 527.419 106.93 663.1c56.2 135.681 82.359-8.823 160.575 69.352 78.218 78.214-66.3 104.4 69.391 160.6s51.993-64.483 162.612-64.483c110.586 0 26.892 120.678 162.61 64.483 135.693-56.2-8.854-82.384 69.36-160.6 78.215-78.175 104.375 66.329 160.606-69.352 56.199-135.681-64.516-51.99-64.516-162.6M500 301.015c110.457 0 200 89.537 200 199.985s-89.543 199.985-200 199.985S300 611.448 300 501s89.543-199.985 200-199.985" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="tick">
-    <path d="M21 5.76a1.55 1.55 0 0 0-2.613-1.138l-9.18 8.938-3.025-3.368a1.545 1.545 0 0 0-2.107.08l-.62.625a1.566 1.566 0 0 0-.115 2.077l4.966 6.24a1.546 1.546 0 0 0 2.423 0l9.931-12.48c.22-.276.34-.62.34-.974Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="tick">
+    <path d="M875 240a64.568 64.568 0 0 0-108.864-47.408l-.011-.012L383.621 565 257.594 424.648l-.011.014a64.37 64.37 0 0 0-87.784 3.375l-25.862 26a65.23 65.23 0 0 0-4.758 86.56l-.011.008 206.9 260 .01-.008a64.407 64.407 0 0 0 100.953 0l.011.009 413.793-520-.011-.008A64.9 64.9 0 0 0 875 240" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="day">
-    <path d="M19.2 4.2h-2.4v-.912a.89.89 0 0 0-.9-.888.9.9 0 0 0-.9.9v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm.6 15.6H4.5a.9.9 0 0 1-.9-.9V9.6h15.3a.9.9 0 0 1 .9.9v9.3ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm8.4 0c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.112c.377.278.6.72.6 1.188a1.5 1.5 0 1 1-3 0Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="calendar-day">
+    <path d="M800 175H700v-38c0-20.71-16.789-37-37.5-37a37.5 37.5 0 0 0-37.5 37.5V175H350.011L350 137.5a37.5 37.5 0 0 0-75 0V175H100v625a75 75 0 0 0 75 75h700V250a75 75 0 0 0-75-75m25 650H187.5a37.5 37.5 0 0 1-37.5-37.5V400h637.5a37.5 37.5 0 0 1 37.5 37.5zM250 262.5a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0V250h.011v-37.493A62.5 62.5 0 1 1 250 262.5m350 0a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0l-.011-12.5H700v-37a61.47 61.47 0 0 1 25 49.5 62.5 62.5 0 0 1-125 0" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="week">
-    <path d="M19.2 4.2h-2.4v-.912a.89.89 0 0 0-.9-.888.9.9 0 0 0-.9.9v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.6H4.5a.9.9 0 0 1-.9-.9V9.6h3.6v10.2ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.5H7.8V9.6h3.6v10.2Zm4.2 0H12V9.6h3.6v10.2ZM14.4 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.112c.377.278.6.72.6 1.188a1.5 1.5 0 1 1-3 0Zm5.4 13.5h-3.6V9.6h2.7a.9.9 0 0 1 .9.9v9.3Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="calendar-week">
+    <path d="M800 175H700v-38c0-20.71-16.789-37-37.5-37a37.5 37.5 0 0 0-37.5 37.5V175H350.011L350 137.5a37.5 37.5 0 0 0-75 0V175H100v625a75 75 0 0 0 75 75h700V250a75 75 0 0 0-75-75M300 825H187.5a37.5 37.5 0 0 1-37.5-37.5V400h150zm-50-562.5a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0V250h.011v-37.493A62.5 62.5 0 1 1 250 262.5M475 825H325V400h150zm175 0H500V400h150zm-50-562.5a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0l-.011-12.5H700v-37a61.47 61.47 0 0 1 25 49.5 62.5 62.5 0 0 1-125 0M825 825H675V400h112.5a37.5 37.5 0 0 1 37.5 37.5z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="month">
-    <path d="M19.2 4.2h-2.4v-.9a.9.9 0 1 0-1.8 0v.9H8.4v-.9a.9.9 0 1 0-1.8 0v.9H2.4v15A1.8 1.8 0 0 0 4.2 21H21V6a1.8 1.8 0 0 0-1.8-1.8Zm-12 15.598H4.5a.9.9 0 0 1-.9-.9V16.8H7.2v2.998Zm0-3.598H3.6v-3H7.2v3Zm0-3.6H3.6V9.598H7.2V12.6ZM6 6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1A1.5 1.5 0 1 1 6 6.3Zm5.4 13.498H7.8V16.8h3.6v2.998Zm0-3.598H7.8v-3h3.6v3Zm0-3.6H7.8V9.598h3.6V12.6Zm4.2 7.198H12V16.8h3.6v2.998Zm0-3.598H12v-3h3.6v3Zm0-3.6H12V9.598h3.6V12.6Zm-1.2-6.3c0-.472.222-.917.6-1.2v1.2a.9.9 0 1 0 1.8 0V5.1a1.5 1.5 0 1 1-2.4 1.2Zm5.399 9.9H16.2v-3H19.8v3Zm0-3.6H16.2V9.598H18.9a.9.9 0 0 1 .9.9V12.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="calendar-month">
+    <path d="M800 175H700v-37.5a37.5 37.5 0 0 0-75 0V175H350v-37.5a37.5 37.5 0 0 0-75 0V175H100v625a75 75 0 0 0 75 75h700V250a75 75 0 0 0-75-75M300.01 824.91H187.45a37.5 37.5 0 0 1-37.5-37.5V700h150.06zm0-149.91H149.95V550h150.06zm0-150H149.95V399.91h150.06zM250 262.5a62.39 62.39 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0v-50l.01.01A62.5 62.5 0 1 1 250 262.5m225.01 562.41h-150V700h150zm0-149.91h-150V550h150zm0-150h-150V399.91h150zm175 299.91h-150V700h150zm0-149.91h-150V550h150zm0-150h-150V399.91h150zM600 262.5a62.39 62.39 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0v-50l.01.01A62.5 62.5 0 1 1 600 262.5M824.95 675H675.01V550h149.94zm0-150H675.01V399.91h112.44a37.5 37.5 0 0 1 37.5 37.5z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="assistance">
-    <path d="M12 1.8C6.367 1.8 1.8 6.367 1.8 12c0 5.633 4.567 10.2 10.2 10.2 5.633 0 10.2-4.567 10.2-10.2 0-5.633-4.567-10.2-10.2-10.2Zm.74 16.335a1.3 1.3 0 0 1-.89.343 1.346 1.346 0 0 1-.911-.338c-.26-.226-.39-.54-.39-.946 0-.359.126-.661.377-.906.25-.246.558-.368.924-.368.359 0 .661.122.907.368.245.245.367.547.367.906 0 .4-.128.713-.385.941Zm3.194-7.92a3.894 3.894 0 0 1-.701.944c-.271.265-.757.712-1.459 1.339-.164.147-.32.302-.466.466a1.9 1.9 0 0 0-.26.368c-.056.107-.1.218-.134.334-.03.11-.078.306-.14.586-.109.593-.448.89-1.019.89a1.04 1.04 0 0 1-.748-.292c-.203-.193-.304-.481-.304-.864 0-.479.074-.894.223-1.244.14-.34.34-.653.59-.924.245-.265.576-.58.992-.946.365-.319.629-.56.792-.722.161-.161.3-.344.41-.543.111-.2.169-.423.167-.65 0-.457-.17-.842-.51-1.155-.339-.314-.776-.47-1.312-.47-.627 0-1.09.157-1.386.474-.296.317-.547.783-.752 1.399-.195.644-.562.966-1.104.966-.32 0-.59-.112-.809-.338-.22-.225-.329-.469-.329-.731 0-.542.174-1.09.522-1.647.348-.556.855-1.016 1.523-1.381.667-.365 1.445-.548 2.335-.548.826 0 1.556.153 2.19.458.633.305 1.121.72 1.467 1.245.345.524.517 1.094.517 1.71 0 .485-.098.91-.295 1.275Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="assistance">
+    <path d="M500 75C265.277 75 75 265.279 75 500s190.277 425 425 425 425-190.279 425-425S734.721 75 500 75m30.8 680.633a54.15 54.15 0 0 1-37.069 14.267 56.1 56.1 0 0 1-37.95-14.085q-16.233-14.079-16.226-39.384 0-22.458 15.679-37.781t38.5-15.324q22.464 0 37.789 15.324t15.324 37.781q-.003 24.951-16.047 39.202m133.12-330.046a162.3 162.3 0 0 1-29.23 39.38q-16.92 16.574-60.772 55.785A248 248 0 0 0 554.5 540.18a79.2 79.2 0 0 0-10.868 15.32 75 75 0 0 0-5.529 13.9q-1.953 6.954-5.879 24.42-6.762 37.068-42.413 37.069-18.541 0-31.192-12.119t-12.647-36q0-29.945 9.262-51.863a131.4 131.4 0 0 1 24.6-38.491q15.319-16.577 41.35-39.4 22.789-19.946 32.962-30.113a102 102 0 0 0 17.105-22.632 54.7 54.7 0 0 0 6.955-27.086q0-28.517-21.213-48.119t-54.7-19.6q-39.213 0-57.743 19.783t-31.359 58.272Q401.059 423.8 367.2 423.8q-19.964 0-33.683-14.079T319.8 379.248q0-33.852 21.739-68.606t63.447-57.562q41.7-22.814 97.3-22.813 51.66 0 91.244 19.069 39.549 19.074 61.119 51.856t21.571 71.286q.004 30.297-12.297 53.109Z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="document">
-    <path d="M15 1.8v3.6c0 .663.478 1.2 1.067 1.2H19.8L15 1.8Zm1.2 6a2.4 2.4 0 0 1-2.4-2.4V1.8H4.2V21a1.2 1.2 0 0 0 1.2 1.2h14.4V7.8h-3.6ZM7.8 9h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 0 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm0 2.4h8.4a.6.6 0 1 1 0 1.2H7.8a.6.6 0 1 1 0-1.2Zm2.4 3.6H7.8a.6.6 0 1 1 0-1.2h2.4a.6.6 0 0 1 0 1.2Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="file-document">
+    <path d="M625 75v150c0 27.614 19.9 50 44.444 50H825Zm50 250a100 100 0 0 1-100-100V75H175v799.773h.006c0 .076-.006.151-.006.227a50 50 0 0 0 50 50h600V325zm-350 50h350a25 25 0 0 1 0 50H325a25 25 0 0 1 0-50m0 100h350a25 25 0 0 1 0 50H325a25 25 0 0 1 0-50m0 100h350a25 25 0 0 1 0 50H325a25 25 0 0 1 0-50m100 150H325a25 25 0 0 1 0-50h100a25 25 0 0 1 0 50" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="live-chat">
-    <path fill-rule="evenodd" d="M19.8 3H2.4v12.6a1.8 1.8 0 0 0 1.8 1.8h2.4v4.2l4.2-4.2h10.8V4.8A1.8 1.8 0 0 0 19.8 3Zm-3.67 5.294h-.265C15.275 6.252 13.768 4.8 12 4.8c-1.768 0-3.276 1.452-3.865 3.494h-.264A1.27 1.27 0 0 0 6.6 9.564v1.271c0 .702.569 1.27 1.27 1.27h.265C8.725 14.149 10.232 15.6 12 15.6c1.768 0 3.276-1.452 3.865-3.494h.264a1.27 1.27 0 0 0 1.271-1.27V9.564a1.27 1.27 0 0 0-1.27-1.27Zm-1.178 4.447h-2.053a.953.953 0 1 0 0 .635h1.698a4.534 4.534 0 0 1-.182.256c-.325.426-.7.758-1.115.988-.806.46-1.794.46-2.6 0a3.624 3.624 0 0 1-1.115-.988 5.066 5.066 0 0 1-.785-1.526 6.335 6.335 0 0 1 0-3.812 5.59 5.59 0 0 1 .172-.464.435.435 0 0 1 .462-.26c.492.071 1.376.34 2.566 1.283 1.442 1.142 2.974.827 3.446.556.032.262.048.526.048.791a6.186 6.186 0 0 1-.294 1.906c-.07.217-.152.429-.248.635Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="live-chat">
+    <path d="M825 125H100v525c0 41.4 33.6 75 75 75h100v175l175-175h450V200c0-41.4-33.6-75-75-75M725 451.5c0 29.2-23.7 52.9-52.9 52.9h-11C636.5 589.5 573.6 650 500 650s-136.5-60.5-161-145.6h-11c-29.2 0-52.9-23.7-52.9-52.9v-52.9c0-29.2 23.7-52.9 52.9-52.9h11C363.5 260.5 426.4 200 500 200s136.5 60.5 161 145.6h11c29.2 0 52.9 23.7 52.9 52.9v53z"/><path d="M500 368.9c-49.6-39.3-86.4-50.5-106.9-53.4-8.1-1.2-16 3.3-19.2 10.8-2.6 6.2-5 12.7-7.2 19.3-16.3 51.7-16.3 107.2 0 158.9 7.7 23.9 18.7 45.3 32.7 63.6 13.6 17.7 29.2 31.6 46.5 41.1 33.6 19.2 74.8 19.2 108.3 0 17.3-9.6 32.9-23.4 46.5-41.1 2.6-3.4 5.2-7 7.6-10.7h-70.8c-4 11.3-12.9 20.2-24.2 24.2-20.7 7.3-43.4-3.5-50.7-24.2s3.5-43.4 24.2-50.7 43.4 3.5 50.7 24.2H623c4-8.6 7.5-17.4 10.4-26.4 8.2-25.7 12.3-52.5 12.2-79.4 0-11-.7-22-2-33-19.7 11.2-83.5 24.4-143.6-23.2"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="location-pin-compass">
-    <path d="M18.6 8.4a6.6 6.6 0 1 0-12.33 3.277L12 22.2l5.73-10.523A6.57 6.57 0 0 0 18.6 8.4ZM12 13.2a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6Zm2.963-7.576-6.92 3.068 2.474.73.378 2.825 4.068-6.623Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="location-pin-compass">
+    <path d="M775 350c0-151.875-123.123-275-275-275S225 198.125 225 350a273.74 273.74 0 0 0 36.235 136.528L500 925l238.769-438.472A273.73 273.73 0 0 0 775 350M500 550c-110.457 0-200-89.543-200-200s89.543-200 200-200 200 89.543 200 200-89.543 200-200 200m123.457-315.658L335.14 362.17l103.051 30.409 15.768 117.692Z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="mobile-network-coverage">
-    <path d="M18 21.6a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V7.2a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v14.4Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V10.8a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v10.8Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6v-7.2a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v7.2Zm-5.4 0a.602.602 0 0 0 .6.6h3a.602.602 0 0 0 .6-.6V18a.602.602 0 0 0-.6-.6h-3a.602.602 0 0 0-.6.6v3.6Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="mobile-network-coverage">
+    <path d="M750 800a25.073 25.073 0 0 0 25 25h125a25.073 25.073 0 0 0 25-25V200a25.073 25.073 0 0 0-25-25H775a25.073 25.073 0 0 0-25 25zm-225 0a25.073 25.073 0 0 0 25 25h125a25.073 25.073 0 0 0 25-25V350a25.073 25.073 0 0 0-25-25H550a25.073 25.073 0 0 0-25 25zm-225 0a25.073 25.073 0 0 0 25 25h125a25.073 25.073 0 0 0 25-25V500a25.073 25.073 0 0 0-25-25H325a25.073 25.073 0 0 0-25 25zm-225 0a25.073 25.073 0 0 0 25 25h125a25.073 25.073 0 0 0 25-25V650a25.073 25.073 0 0 0-25-25H100a25.073 25.073 0 0 0-25 25z" style="fill-rule:evenodd"/>
   </symbol>
-  <symbol fill="currentColor" viewBox="0 0 24 24" id="child-protection">
-    <path fill-rule="evenodd" d="M15.958 5.402a3.942 3.942 0 0 1-3.946 3.937 3.942 3.942 0 0 1-3.946-3.937 3.942 3.942 0 0 1 3.946-3.938 3.942 3.942 0 0 1 3.946 3.938Zm-.785 3.635a4.831 4.831 0 0 1-6.322 0 4.81 4.81 0 0 0-2.539 4.24v3.5c0 3.14 2.552 5.687 5.7 5.687s5.7-2.546 5.7-5.687v-3.5a4.81 4.81 0 0 0-2.54-4.24Zm-2.77 4.485a1.573 1.573 0 1 1-3.147-.004 1.573 1.573 0 0 1 3.147.004Zm-.21 1.594a2.09 2.09 0 0 1-2.707.017c-.619.359-1 1.02-.999 1.735v1.459a2.367 2.367 0 1 0 4.735 0v-1.459c0-.727-.394-1.398-1.03-1.752Z"/>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="child-protection">
+    <path d="M632.2 376.5c-75.6 65.4-187.8 65.4-263.4 0C303.7 411.4 263 479.3 263 553.2V699c0 130.9 106.3 237 237.5 237S738 829.9 738 699V553.2c0-73.9-40.7-141.8-105.8-176.7m-181 121.3c36.2 0 65.6 29.4 65.6 65.6s-29.4 65.5-65.6 65.5-65.5-29.4-65.5-65.6 29.4-65.5 65.5-65.5m99.7 265.8v.6c-.2 54.5-44.5 98.5-99 98.3s-98.5-44.5-98.3-99v-60.8c0-29.8 15.8-57.4 41.6-72.3 32.7 27.4 80.4 27.1 112.8-.7 26.5 14.8 42.9 42.7 42.9 73z"/>
+    <ellipse cx="500.5" cy="225.1" rx="164.4" ry="164.1"/>
+  </symbol>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="trash">
+    <path d="M750 149.959H625V125a50 50 0 0 0-50-50H425a50 50 0 0 0-50 50v24.959H250a75 75 0 0 0-75 75V275h650v-50.041a75 75 0 0 0-75-75M425 125h150v24.959H425zM225 299.959V925h550V299.959zM375 400v425a25 25 0 0 1-50 0V399.959a25 25 0 0 1 50 0zm150 0v425a25 25 0 0 1-50 0V399.959a25 25 0 0 1 50 0zm150 0v425a25 25 0 0 1-50 0V399.959a25 25 0 0 1 50 0z" style="fill-rule:evenodd"/>
   </symbol>
 </svg>
diff --git a/site/static/docs/5.3/assets/img/boosted-warning.svg b/site/static/docs/5.3/assets/img/boosted-warning.svg
new file mode 100644
index 0000000000..34cb97b5f7
--- /dev/null
+++ b/site/static/docs/5.3/assets/img/boosted-warning.svg
@@ -0,0 +1,4 @@
+<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>

From 40af0842d98cb4861bbedf2a0bd8325c384deda7 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 11:00:53 +0100
Subject: [PATCH 15/39] icons finder url

---
 hugo.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hugo.yml b/hugo.yml
index 9c8721b0ff..83726f744c 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -70,7 +70,7 @@ params:
   repo:                             "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap"
   twitter:                          "getbootstrap"
   blog:                             "https://blog.getbootstrap.com/"
-  icons:                            "https://design.orange.com/0c1af118d/p/23d499-solaris-icons"
+  icons:                            "https://oran.ge/icons"
   icons_license:                    "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
   icons_doc:                        "https://design.orange.com/0c1af118d/p/92bb17-usage"
   bootstrap:                        "https://getbootstrap.com"

From ec70b22b1c2eb1ec7f17a29df5bdb91b39f1b786 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 11:03:02 +0100
Subject: [PATCH 16/39] no closing </link> for preload

---
 site/content/docs/5.3/extend/icons.md | 2 +-
 site/layouts/partials/header.html     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 0e0c044aff..1c1ff7a30b 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -81,7 +81,7 @@ This is similar to an `<img>` element, but with the power of `currentColor` for
 
 To speed up loading, the sprite file can be preloaded in the `<head>` of the page:
 ```html
-<link rel="preload" href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml"></link>
+<link rel="preload" href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml">
 ```
 
 ### Web font
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index ffb639acf7..119e84276c 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -21,7 +21,7 @@
 <link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/dist/fonts/HelvNeue55_W1G.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 <link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/dist/fonts/HelvNeue75_W1G.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
-<link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml"></link>
+<link rel="preload" href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml">
 <!-- end mod -->
 
 {{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}

From 10cfd072226edc90096380384efeb30c04405657 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 11:10:17 +0100
Subject: [PATCH 17/39] .

---
 site/content/docs/5.3/extend/icons.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 1c1ff7a30b..f7271f7e3d 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -87,9 +87,9 @@ To speed up loading, the sprite file can be preloaded in the `<head>` of the pag
 ### Web font
 
 Using the Solaris icons finder, you can generate a Web font containing all your icons and use it like a classic font.
-Icons can be styled through CSS properties like `font-size` and `color`. However, for websites needing more than 20 icons, you may consider using a web font instead of a SVG sprite.
+Icons can be styled through CSS properties like `font-size` and `color`.
 
-It is not the preferred solution, so it is not used in Boosted and cannot be documented here.
+It is not the preferred solution, so it is not used in Boosted and cannot be documented here. However, for websites needing more than 20 icons, you may consider using a Web font instead of a SVG sprite.
 
 ### Inline SVG
 

From b64521a60d6ff621ab5d9290c71154ed265c59e7 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 12:06:49 +0100
Subject: [PATCH 18/39] Adjustments after first light review with LM

---
 site/content/docs/5.3/components/tooltips.md |   8 +-
 site/content/docs/5.3/content/tables.md      | 106 +++++++++----------
 site/content/docs/5.3/extend/icons.md        |  36 +++++--
 3 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index 72806cbaca..2d5fc0916e 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -127,14 +127,14 @@ With an SVG:
 
 <div class="bd-example tooltip-demo">
   <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
       <rect width="100%" height="100%" fill="#563d7c"/>
       <circle cx="50" cy="50" r="30" fill="#007bff"/>
     </svg>
   </a>
 
   <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
-    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" focusable="false" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true" focusable="false">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
     </svg>
     <span class="visually-hidden">Helper</span>
@@ -143,14 +143,14 @@ With an SVG:
 
 ```html
 <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
-  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
+  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
     <rect width="100%" height="100%" fill="#563d7c"/>
     <circle cx="50" cy="50" r="30" fill="#007bff"/>
   </svg>
 </a>
 
 <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
-  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" focusable="false" aria-hidden="true">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
   </svg>
   <span class="visually-hidden">Helper</span>
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index bba89e0b97..ba86b1f510 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -977,10 +977,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg1" class="me-2">
-              <title id="svg1">Document</title>
+            <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
               <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
+            <span class="visually-hidden">Document</span>
             Cell text
           </td>
           <td>Cell text</td>
@@ -1014,10 +1014,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg2" class="me-2">
-              <title id="svg2">Document</title>
+            <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
               <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
+            <span class="visually-hidden">Document</span>
             Cell text
           </td>
           <td>Cell text</td>
@@ -1034,10 +1034,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg3" class="me-2">
-              <title id="svg3">Document</title>
+            <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
               <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
+            <span class="visually-hidden">Document</span>
             Cell text
           </td>
           <td>Cell text</td>
@@ -1054,10 +1054,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg4" class="me-2">
-              <title id="svg4">Document</title>
+            <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
               <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
+            <span class="visually-hidden">Document</span>
             Cell text
           </td>
           <td>Cell text</td>
@@ -1074,10 +1074,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg5" class="me-2">
-              <title id="svg5">Document</title>
+            <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
               <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
+            <span class="visually-hidden">Document</span>
             Cell text
           </td>
           <td>Cell text</td>
@@ -1094,10 +1094,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg6" class="me-2">
-              <title id="svg6">Document</title>
+            <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
               <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
             </svg>
+            <span class="visually-hidden">Document</span>
             Cell text
           </td>
           <td>Cell text</td>
@@ -1119,10 +1119,10 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
     </td>
     ...
     <td>
-      <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="svg1" class="me-2">
-        <title id="svg1">Document</title>
+      <svg width="1.875rem" height="1.875rem" class="me-2" aria-hidden="true" focusable="false">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"></use>
       </svg>
+      <span class="visually-hidden">Document</span>
       Cell text
     </td>
     ...
@@ -1148,75 +1148,75 @@ Use SVG or PNG to display icons or thumbnails in your table data cell elements (
         <tr>
           <th scope="row" class="fw-normal">Cell text</th>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check1-1">
-              <title id="check1-1">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check1-2">
-              <title id="check1-2">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check1-3">
-              <title id="check1-3">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
         </tr>
         <tr>
           <th scope="row" class="fw-normal">Cell text</th>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check2-1">
-              <title id="check2-1">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check2-2">
-              <title id="check2-2">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check2-3">
-              <title id="check2-3">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
         </tr>
         <tr>
           <th scope="row" class="fw-normal">Cell text</th>
           <td></td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check3-1">
-              <title id="check3-1">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check3-2">
-              <title id="check3-2">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
         </tr>
         <tr>
           <th scope="row" class="fw-normal">Cell text</th>
           <td></td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check4-1">
-              <title id="check4-1">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check4-2">
-              <title id="check4-2">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
         </tr>
         <tr>
@@ -1224,10 +1224,10 @@ Use SVG or PNG to display icons or thumbnails in your table data cell elements (
           <td></td>
           <td></td>
           <td>
-           <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check5">
-             <title id="check5">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+           <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
         </tr>
         <tr>
@@ -1235,10 +1235,10 @@ Use SVG or PNG to display icons or thumbnails in your table data cell elements (
           <td></td>
           <td></td>
           <td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check6">
-              <title id="check6">Yes</title>
-              <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+            <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
             </svg>
+            <span class="visually-hidden">Yes</span>
           </td>
         </tr>
       </tbody>
@@ -1251,10 +1251,10 @@ Use SVG or PNG to display icons or thumbnails in your table data cell elements (
   <table class="table align-middle">
     ...
     <td>
-      <svg xmlns="http://www.w3.org/2000/svg" width="1.875rem" height="1.875rem" viewBox="0 0 30 30" role="img" aria-labelledby="check1-1">
-        <title id="check1-1">Yes</title>
-        <use style="color: var(--bs-success);" xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
+      <svg width="1.875rem" height="1.875rem" aria-hidden="true" focusable="false" class="text-success">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"></use>
       </svg>
+      <span class="visually-hidden">Yes</span>
     </td>
     ...
   </table>
diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index f7271f7e3d..4f08cdecbe 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -32,6 +32,7 @@ See Solaris icons library [develop documentation]({{< param icons_doc >}}) for c
 All icons can be retrieved easily in any of these formats in the Solaris icons finder, except for the specific case of [warning icon]({{< docsref "extend/icons#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 a 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]({{< docsref "/utilities/colors" >}}) or local style.
@@ -85,15 +86,15 @@ To speed up loading, the sprite file can be preloaded in the `<head>` of the pag
 ```
 
 ### Web font
+Web font is not the preferred solution, so it is not used in Boosted and cannot be documented here. However, for websites needing more than 20 icons, you may consider using a Web font instead of a SVG sprite.
 
 Using the Solaris icons finder, you can generate a Web font containing all your icons and use it like a classic font.
 Icons can be styled through CSS properties like `font-size` and `color`.
 
-It is not the preferred solution, so it is not used in Boosted and cannot be documented here. However, for websites needing more than 20 icons, you may consider using a Web font instead of a SVG sprite.
-
 ### Inline SVG
+This technique should only be used if you have a few icons to render, and not rendering the same icon multiple times.
 
-You can embed your icons directly within the HTML of your page (as opposed to an external image file). This technique should only be used if you have a few icons to render, and not rendering the same icon multiple times.
+You can embed your icons directly within the HTML of your page (as opposed to an external image file).
 
 {{< example class="mt-0" >}}
 <svg fill="currentColor" width="2em" height="2em" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
@@ -105,6 +106,10 @@ The `fill="currentColor"` attribute is required if you want to change the color
 
 ### SVG external image
 
+You can use it when:
+- you only have a few icons to render
+- you don't need to change the style or color of the icon
+
 You can download the Solaris icons SVGs from the Solaris icons finder, copy them into your project and reference them like normal images with the `<img>` element.
 
 {{< example class="mt-0" >}}
@@ -113,10 +118,11 @@ You can download the Solaris icons SVGs from the Solaris icons finder, copy them
 
 ### 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]({{< docsref "/customize/sass" >}}#escape-svg)).
 
 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.
 
 {{< example class="mt-0" >}}
@@ -144,8 +150,7 @@ Then, you can:
 
 ## Icons accessibility
 
-{{< callout warning >}}
-Given the numerous ways in which icons can be used and considering Boosted website is a documentation, we haven’t always included accessibility attributes in our code.
+{{< 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 >}}
 
@@ -159,7 +164,7 @@ Purely **decorative icons** (like repeating information of an adjacent text) mus
 #### 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).
-For this, you use the `.visually-hidden` class.
+For this, you can use the `.visually-hidden` class.
 
 {{< example class="mt-0" >}}
 <button type="button" class="btn btn-icon btn-outline-secondary">
@@ -183,6 +188,13 @@ SVG symbol to insert into your SVG sprite:
 </symbol>
 ```
 
+Then use it like this:
+{{< example class="mt-0" >}}
+<svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
+  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning-important-accessible"/>
+</svg>
+{{< /example >}}
+
 ### Web font
 Please note that this icon cannot be used in a Web font, due to its two colors.
 
@@ -196,7 +208,15 @@ SVG code for an inline SVG:
 {{< /example >}}
 
 ### SVG external image
-Code for an external SVG image:
+Code to copy in an external SVG file:
+```xml
+<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:
 {{< example class="mt-0" >}}
 <img src="/docs/{{< param docs_version >}}/assets/img/boosted-warning.svg" alt="" width="32" height="32">
 {{< /example >}}

From 12e2fac1579b19671176a34dfd0045451396d2fc Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 12:11:08 +0100
Subject: [PATCH 19/39] .

---
 site/content/docs/5.3/extend/icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 4f08cdecbe..a8b76ec7d0 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -98,7 +98,7 @@ You can embed your icons directly within the HTML of your page (as opposed to an
 
 {{< example class="mt-0" >}}
 <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"></path>
+  <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>
 {{< /example >}}
 

From 450e0a091e0361c42fff4ae83412ebba9e63a89d Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 21 Feb 2024 12:45:31 +0100
Subject: [PATCH 20/39] remove icons from color utilities example and point to
 icons doc

---
 site/content/docs/5.3/extend/icons.md     | 10 ++++++++++
 site/content/docs/5.3/utilities/colors.md | 22 +---------------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index a8b76ec7d0..7c1105c916 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -42,6 +42,9 @@ This is similar to an `<img>` element, but with the power of `currentColor` for
   <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/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/{{< param docs_version >}}/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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#trash"/>
   </svg>
@@ -62,6 +65,9 @@ This is similar to an `<img>` element, but with the power of `currentColor` for
   <svg width="1.875em" height="1.875em" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/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/{{< param docs_version >}}/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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#trash"/>
   </svg>
@@ -189,6 +195,7 @@ SVG symbol to insert into your SVG sprite:
 ```
 
 Then use it like this:
+
 {{< example class="mt-0" >}}
 <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning-important-accessible"/>
@@ -200,6 +207,7 @@ 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:
+
 {{< example class="mt-0" >}}
 <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"/>
@@ -217,12 +225,14 @@ Code to copy in an external SVG file:
 ```
 
 Then use it like this:
+
 {{< example class="mt-0" >}}
 <img src="/docs/{{< param docs_version >}}/assets/img/boosted-warning.svg" alt="" width="32" height="32">
 {{< /example >}}
 
 ### CSS background SVG
 CSS code for background SVG image:
+
 {{< example class="mt-0" >}}
 <style>
   .icon-warning {
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index f8fb39f65a..b6630e73b0 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -90,27 +90,7 @@ Here are some compliant combinations examples for texts:
 </div>
 {{< /example >}}
 
-Here are some compliant combinations examples for non-texts elements, such as SVG icons:
-
-{{< example >}}
-<p class="p-2">
-  <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#error-severe"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning-important-accessible"/>
-  </svg>
-</p>
-{{< /example >}}
+Go to [icons documentation]({{< docsref "extend/icons" >}}) to see how to use text utilities with icons.
 
 <!-- End mod -->
 

From 9551335649196ba09c85fd920b9bab2d018026fb Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 21 Feb 2024 16:19:50 +0100
Subject: [PATCH 21/39] Fix CI + some typo proposals

---
 site/assets/scss/_component-examples.scss | 22 +++++++++
 site/content/docs/5.3/extend/icons.md     | 54 +++++++++--------------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index ee77113db0..edd38f3e7a 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -467,4 +467,26 @@
     white-space: nowrap;
   }
 }
+
+// scss-docs-start icon-home
+.icon-home::before {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: bottom;
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3c/svg%3e");
+  background-size: contain;
+}
+// scss-docs-end icon-home
+
+// scss-docs-start icon-warning
+.icon-warning {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3cpath 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'/%3e%3c/svg%3e");
+  background-size: contain;
+}
+// scss-docs-end icon-warning
 // End mod
diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 7c1105c916..c0b6119ad7 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -22,7 +22,7 @@ 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 few icons to render:
+- 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" >}})
@@ -34,7 +34,7 @@ All icons can be retrieved easily in any of these formats in the Solaris icons f
 ### SVG Sprite
 This technique is the preferred choice for flexibility, performance and accessibility.
 
-Using the Solaris icons finder, you can generate a SVG sprite—a single SVG file containing all your icons—and insert an icon through the `<use>` element.
+Using the [Solaris icons finder]({{< param icons >}}), 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]({{< docsref "/utilities/colors" >}}) or local style.
 
 {{< example >}}
@@ -88,17 +88,17 @@ This is similar to an `<img>` element, but with the power of `currentColor` for
 
 To speed up loading, the sprite file can be preloaded in the `<head>` of the page:
 ```html
-<link rel="preload" href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg" as="image" type="image/svg+xml">
+<link rel="preload" href="/path/to/your/sprite.svg" as="image" type="image/svg+xml">
 ```
 
 ### Web font
-Web font is not the preferred solution, so it is not used in Boosted and cannot be documented here. However, for websites needing more than 20 icons, you may consider using a Web font instead of a SVG sprite.
+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.
-Icons can be styled through CSS properties like `font-size` and `color`.
+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`.
 
 ### Inline SVG
-This technique should only be used if you have a few icons to render, and not rendering the same icon multiple times.
+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).
 
@@ -108,15 +108,15 @@ You can embed your icons directly within the HTML of your page (as opposed to an
 </svg>
 {{< /example >}}
 
-The `fill="currentColor"` attribute is required if you want to change the color of the icons on the fly, and that the foreground color changes in dark/light mode.
+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 a few icons to render
-- you don't need to change the style or color of the icon
+- you only have few icons to render
+- you don't need to change the icon style or color
 
-You can download the Solaris icons SVGs from the Solaris icons finder, copy them into your project and reference them like normal images with the `<img>` element.
+You can download the Solaris icons SVGs from the [Solaris icons finder]({{< param icons >}}), copy them into your project and reference them like normal images with the `<img>` element.
 
 {{< example class="mt-0" >}}
 <img src="/docs/{{< param docs_version >}}/assets/img/boosted-cross.svg" alt="" width="32" height="32">
@@ -132,23 +132,16 @@ When no dimensions are specified via `width` and `height` on the `<svg>`, the ic
 Note that the `xmlns` attribute is required.
 
 {{< example class="mt-0" >}}
-<style>
-  .icon-home::before {
-    content:"";
-    display: inline-block;
-    width: 2rem;
-    height: 2rem;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3c/svg%3e");
-    background-size: contain;
-    vertical-align: bottom;
-  }
-</style>
 <span class="icon-home"></span>
 {{< /example >}}
 
+Using:
+
+{{< scss-docs name="icon-home" file="site/assets/scss/_component-examples.scss" >}}
+
 ## Modify icons color
 
-For SVGs, we recommend setting `fill="currentColor"` on the `<svg>` tag: it will make the icon inherit color from its parent container.
+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]({{< docsref "utilities/colors" >}}) like `.text-success` that change current color value
@@ -162,7 +155,7 @@ For more details, **Orange Accessibility Guidelines** provides [a deep-dive arti
 
 #### 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 `<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
@@ -234,14 +227,9 @@ Then use it like this:
 CSS code for background SVG image:
 
 {{< example class="mt-0" >}}
-<style>
-  .icon-warning {
-    display: inline-block;
-    width: 2rem;
-    height: 2rem;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3cpath 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'/%3e%3c/svg%3e");
-    background-size: contain;
-  }
-</style>
 <span class="icon-warning"></span>
 {{< /example >}}
+
+Using:
+
+{{< scss-docs name="icon-warning" file="site/assets/scss/_component-examples.scss" >}}

From e0bd648703a71f350e6c8028c35d3f133db3b1b1 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 10:41:21 +0100
Subject: [PATCH 22/39] new error-severe icon (waiting for new warning icon
 with two paths...)

---
 site/static/docs/5.3/assets/img/boosted-sprite.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index f059f509d4..8ea83a67e1 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -10,7 +10,7 @@
     <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>
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="error-severe">
-    <path d="M863.641 699.619h.008L571.982 199.365h-.008a83.294 83.294 0 0 0-143.948 0h-.007L137.068 698.386l-.031.053-.685 1.176h.007A83.369 83.369 0 0 0 208.334 825h583.333a83.369 83.369 0 0 0 71.974-125.381M628.9 689.894a34.27 34.27 0 0 1-48.477 0L500 609.432l-80.423 80.462a34.285 34.285 0 1 1-48.469-48.5l80.421-80.454-77.562-77.6a34.288 34.288 0 0 1 48.479-48.5l77.56 77.6 77.559-77.6a34.287 34.287 0 1 1 48.474 48.5l-77.56 77.6 80.421 80.451a34.32 34.32 0 0 1 0 48.503" style="fill-rule:evenodd"/>
+    <path d="M909.294,734.037h0L581.141,171.784h0a93.755,93.755,0,0,0-161.976,0h0L91.913,732.637v0.1l-0.8,1.3h0A93.752,93.752,0,0,0,172.05,875H828.256a93.819,93.819,0,0,0,81.038-140.963m-264.123-10.9a38.485,38.485,0,0,1-54.526,0h0L500.2,632.664,409.761,723.14a38.543,38.543,0,0,1-55.026-53.986l0.5-.5,90.442-90.476L358.437,491a38.542,38.542,0,0,1,54.525-54.486L500.2,523.792l87.241-87.277A38.543,38.543,0,0,1,642.469,490.5l-0.5.5-87.241,87.277,90.443,90.476a38.3,38.3,0,0,1,0,54.386" style="fill-rule:evenodd"/>
   </symbol>
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="buy">
     <path d="M883.53 387.9H662V273.033C662 185.015 590.5 113 502.5 113S343 185.015 343 273.033V387.9H115a50.016 50.016 0 0 0-42.88 75.736L265 888h465l196.41-424.367c4.52-7.512 8.59-16.314 8.59-25.726 0-27.615-23.85-50.007-51.47-50.007M165 487.918h175l19.23 125.025H223.95Zm150 325.066-60-125.025h115.77L390 812.984zm225 0h-80l-20-125.025h120Zm30-200.041H435l-20-125.025h170ZM586.99 387.9H418.05l-.13-114.864a84.556 84.556 0 1 1 169.11 0ZM685 812.984h-75.31L630 687.959h115Zm91.05-200.041H639.3L655 487.918h175.17Z" style="fill-rule:evenodd"/>

From d4aa97982340013159ee4684268d34395b5b167a Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 10:42:20 +0100
Subject: [PATCH 23/39] Links to icons colors from colors utilities

---
 site/content/docs/5.3/utilities/colors.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index b6630e73b0..34c90d35b0 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -21,6 +21,7 @@ Please refer to our [Orange's colors]({{< docsref "/utilities/colors#oranges-col
 {{< /design-callout-alert >}}
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
+If you want to colorize icons, see [icons documentation]({{< docsref "extend/icons#modify-icons-color"" >}}).
 
 {{< callout info >}}
 Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
@@ -66,6 +67,8 @@ The `.text-primary` color on dark background (`#ff7900`) can be used in any size
 When the interface allows to switch between light and dark backgrounds, the light mode stricter restrictions must be applied!
 {{< /callout >}}
 
+Go to [icons documentation]({{< docsref "extend/icons#modify-icons-color"" >}}) to see how to use text utilities with icons.
+
 Here are some compliant combinations examples for texts:
 
 {{< example >}}
@@ -90,8 +93,6 @@ Here are some compliant combinations examples for texts:
 </div>
 {{< /example >}}
 
-Go to [icons documentation]({{< docsref "extend/icons" >}}) to see how to use text utilities with icons.
-
 <!-- End mod -->
 
 ## Opacity

From 53c46c79a522da0f09ec5ba24c559274dfe7e6f4 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 11:06:21 +0100
Subject: [PATCH 24/39] Links to icons colors from colors utilities

---
 site/content/docs/5.3/utilities/colors.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 34c90d35b0..afb4ee25d8 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -21,7 +21,7 @@ Please refer to our [Orange's colors]({{< docsref "/utilities/colors#oranges-col
 {{< /design-callout-alert >}}
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
-If you want to colorize icons, see [icons documentation]({{< docsref "extend/icons#modify-icons-color"" >}}).
+If you want to colorize icons, see [icons documentation]({{< docsref "extend/icons#modify-icons-color" >}}).
 
 {{< callout info >}}
 Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
@@ -67,7 +67,7 @@ The `.text-primary` color on dark background (`#ff7900`) can be used in any size
 When the interface allows to switch between light and dark backgrounds, the light mode stricter restrictions must be applied!
 {{< /callout >}}
 
-Go to [icons documentation]({{< docsref "extend/icons#modify-icons-color"" >}}) to see how to use text utilities with icons.
+Go to [icons documentation]({{< docsref "extend/icons#modify-icons-color" >}}) to see how to use text utilities with icons.
 
 Here are some compliant combinations examples for texts:
 

From cf0c07cfad4d5c38a60d442dffe986b5056bc445 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 11:18:22 +0100
Subject: [PATCH 25/39] Changes after LM review

---
 site/assets/scss/_component-examples.scss |  8 ++++++--
 site/content/docs/5.3/extend/icons.md     | 23 +++++++++++------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index edd38f3e7a..7040c06d16 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -469,22 +469,26 @@
 }
 
 // scss-docs-start icon-home
+
 .icon-home::before {
   display: inline-block;
   width: 2rem;
   height: 2rem;
   vertical-align: bottom;
   content: "";
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3c/svg%3e");
+  background-color: var(--bs-body-color);
   background-size: contain;
+  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3c/svg%3e");
 }
 // scss-docs-end icon-home
 
 // scss-docs-start icon-warning
-.icon-warning {
+.icon-warning::after {
   display: inline-block;
   width: 2rem;
   height: 2rem;
+  vertical-align: bottom;
+  content: "";
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3cpath 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'/%3e%3c/svg%3e");
   background-size: contain;
 }
diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index c0b6119ad7..b5cde0cb4e 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -97,10 +97,14 @@ Web font is not the preferred solution. Since it's not used in Boosted, it won't
 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`.
 
+{{< callout warning >}}
+Note that with this technique, you cannot have multicolor icons, so you cannot render the [warning icon]({{< docsref "extend/icons#warning-icon" >}}).
+{{< /callout >}}
+
 ### 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).
+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.
 
 {{< example class="mt-0" >}}
 <svg fill="currentColor" width="2em" height="2em" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
@@ -114,13 +118,7 @@ The `fill="currentColor"` attribute is required if you want to change the icons
 
 You can use it when:
 - you only have few icons to render
-- you don't need to change the icon style or color
-
-You can download the Solaris icons SVGs from the [Solaris icons finder]({{< param icons >}}), copy them into your project and reference them like normal images with the `<img>` element.
-
-{{< example class="mt-0" >}}
-<img src="/docs/{{< param docs_version >}}/assets/img/boosted-cross.svg" alt="" width="32" height="32">
-{{< /example >}}
+- 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
 
@@ -145,7 +143,7 @@ For SVGs, we recommend setting `fill="currentColor"` on the `<svg>` tag: it will
 
 Then, you can:
 - use [text color utilities classes]({{< docsref "utilities/colors" >}}) like `.text-success` that change current color value
-- specify a color using CSS variables like: `style="color: var(--bs-success)"`
+- specify a color using CSS variables like `style="color: var(--bs-success)"`
 
 ## Icons accessibility
 
@@ -162,16 +160,17 @@ Purely **decorative icons** (like repeating information of an adjacent text) mus
 
 #### 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).
-For this, you can use the `.visually-hidden` class.
+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 at attribute directly.
 
 {{< example class="mt-0" >}}
 <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/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
   </svg>
-  <span class="visually-hidden">Settings</span>
+  <span class="visually-hidden">Open settings</span>
 </button>
+<img src="/docs/{{< param docs_version >}}/assets/img/boosted-warning.svg" alt="Warning" width="32" height="32">
 {{< /example >}}
 
 ## Warning icon

From 1538f2cb8c9cbf43ce6f42d662f5f64ec8824678 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 11:21:43 +0100
Subject: [PATCH 26/39] remove unused boosted-cross.svg

---
 NOTICE.txt                                        | 2 +-
 site/static/docs/5.3/assets/img/boosted-cross.svg | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)
 delete mode 100644 site/static/docs/5.3/assets/img/boosted-cross.svg

diff --git a/NOTICE.txt b/NOTICE.txt
index 53cb0ff58e..e0c3e8ebfd 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -57,10 +57,10 @@ site/static/docs/**/assets/brand/orange-logo.svg
 site/static/docs/**/assets/brand/orange-logo-formatted.svg
 site/static/docs/**/assets/brand/orange-social.png
 site/static/docs/**/assets/brand/orange-social.svg
-site/static/docs/**/assets/img/boosted-cross.svg
 site/static/docs/**/assets/img/boosted-guidelines.png
 site/static/docs/**/assets/img/boosted-guidelines@2x.png
 site/static/docs/**/assets/img/boosted-sprite.svg
+site/static/docs/**/assets/img/boosted-warning.svg
 site/static/docs/**/assets/img/favicons/android-chrome-192x192.png
 site/static/docs/**/assets/img/favicons/android-chrome-512x512.png
 site/static/docs/**/assets/img/favicons/apple-touch-icon.png
diff --git a/site/static/docs/5.3/assets/img/boosted-cross.svg b/site/static/docs/5.3/assets/img/boosted-cross.svg
deleted file mode 100644
index dc54683a11..0000000000
--- a/site/static/docs/5.3/assets/img/boosted-cross.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1000 1000">
-  <path d="M750 333.333 666.667 250 500 416.667 333.333 250 250 333.333 416.667 500 250 666.667 333.333 750 500 583.333 666.667 750 750 666.667 583.333 500z"></path>
-</svg>

From 886b51d7ebdf3305fa7195f303eb87aeffef5466 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 11:45:36 +0100
Subject: [PATCH 27/39] new icons from Stephen optimized with svgo + not needed
 newline in scss

---
 site/assets/scss/_component-examples.scss           | 1 -
 site/static/docs/5.3/assets/img/boosted-sprite.svg  | 6 +++---
 site/static/docs/5.3/assets/img/boosted-warning.svg | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 7040c06d16..5f80cd62f0 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -469,7 +469,6 @@
 }
 
 // scss-docs-start icon-home
-
 .icon-home::before {
   display: inline-block;
   width: 2rem;
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index 8ea83a67e1..7cac5ba532 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -6,11 +6,11 @@
     <path d="M500 75.5c-234.72 0-425 190.28-425 425s190.28 425 425 425 425-190.28 425-425-190.28-425-425-425m0 100a75 75 0 1 1-75 75 75 75 0 0 1 75-75m125 600H400v-25.737l5.287-.167c15.555-.5 27.115-4.919 34.368-13.136 2.576-2.972 6.956-13.1 6.956-47.153v-227.2c0-32.392-4.523-44.6-8.311-49.141-5.359-6.391-16.516-10.147-33.17-11.156l-5.13-.31v-26h175v313.807c0 32.415 8.457 44.618 12.24 49.142 5.34 6.389 15.68 10.142 32.625 11.152l5.135.3v25.6Z" style="fill-rule:evenodd"/>
   </symbol>
   <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"/>
+    <path d="M499.352 125a93.95 93.95 0 0 1 81.072 46.494L908.91 733.919A93.676 93.676 0 0 1 827.838 874.9H170.867A93.711 93.711 0 0 1 89.8 733.919l.8-1.3v-.1l327.681-561.025A93.83 93.83 0 0 1 499.352 125"/>
+    <path fill="#000" d="M500.352 679.926a47.494 47.494 0 1 0 47.484 47.494 47.53 47.53 0 0 0-47.484-47.494m0-379.949a47.53 47.53 0 0 0-47.483 47.493 28 28 0 0 0 .1 2.9l15.694 258.665v.5c.3 17.1 14.395 23.5 31.689 23.5 17.494 0 31.689-6.6 31.689-24l15.695-258.065.1-.9a23 23 0 0 0 .1-2.6 47.68 47.68 0 0 0-47.583-47.493"/>
   </symbol>
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="error-severe">
-    <path d="M909.294,734.037h0L581.141,171.784h0a93.755,93.755,0,0,0-161.976,0h0L91.913,732.637v0.1l-0.8,1.3h0A93.752,93.752,0,0,0,172.05,875H828.256a93.819,93.819,0,0,0,81.038-140.963m-264.123-10.9a38.485,38.485,0,0,1-54.526,0h0L500.2,632.664,409.761,723.14a38.543,38.543,0,0,1-55.026-53.986l0.5-.5,90.442-90.476L358.437,491a38.542,38.542,0,0,1,54.525-54.486L500.2,523.792l87.241-87.277A38.543,38.543,0,0,1,642.469,490.5l-0.5.5-87.241,87.277,90.443,90.476a38.3,38.3,0,0,1,0,54.386" style="fill-rule:evenodd"/>
+    <path d="M909.294 734.037 581.141 171.784a93.755 93.755 0 0 0-161.976 0L91.913 732.637v.1l-.8 1.3A93.752 93.752 0 0 0 172.05 875h656.206a93.819 93.819 0 0 0 81.038-140.963m-264.123-10.9a38.485 38.485 0 0 1-54.526 0L500.2 632.664l-90.439 90.476a38.543 38.543 0 0 1-55.026-53.986l.5-.5 90.442-90.476L358.437 491a38.542 38.542 0 0 1 54.525-54.486l87.238 87.278 87.241-87.277a38.543 38.543 0 0 1 55.028 53.985l-.5.5-87.241 87.277 90.443 90.476a38.3 38.3 0 0 1 0 54.386" style="fill-rule:evenodd"/>
   </symbol>
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="buy">
     <path d="M883.53 387.9H662V273.033C662 185.015 590.5 113 502.5 113S343 185.015 343 273.033V387.9H115a50.016 50.016 0 0 0-42.88 75.736L265 888h465l196.41-424.367c4.52-7.512 8.59-16.314 8.59-25.726 0-27.615-23.85-50.007-51.47-50.007M165 487.918h175l19.23 125.025H223.95Zm150 325.066-60-125.025h115.77L390 812.984zm225 0h-80l-20-125.025h120Zm30-200.041H435l-20-125.025h170ZM586.99 387.9H418.05l-.13-114.864a84.556 84.556 0 1 1 169.11 0ZM685 812.984h-75.31L630 687.959h115Zm91.05-200.041H639.3L655 487.918h175.17Z" style="fill-rule:evenodd"/>
diff --git a/site/static/docs/5.3/assets/img/boosted-warning.svg b/site/static/docs/5.3/assets/img/boosted-warning.svg
index 34cb97b5f7..75971b8f1c 100644
--- a/site/static/docs/5.3/assets/img/boosted-warning.svg
+++ b/site/static/docs/5.3/assets/img/boosted-warning.svg
@@ -1,4 +1,4 @@
 <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"/>
+  <path fill="#fc0" d="M499.352 125a93.95 93.95 0 0 1 81.072 46.494L908.91 733.919A93.676 93.676 0 0 1 827.838 874.9H170.867A93.711 93.711 0 0 1 89.8 733.919l.8-1.3v-.1l327.681-561.025A93.83 93.83 0 0 1 499.352 125"/>
+  <path fill="#000" d="M500.352 679.926a47.494 47.494 0 1 0 47.484 47.494 47.53 47.53 0 0 0-47.484-47.494m0-379.949a47.53 47.53 0 0 0-47.483 47.493 28 28 0 0 0 .1 2.9l15.694 258.665v.5c.3 17.1 14.395 23.5 31.689 23.5 17.494 0 31.689-6.6 31.689-24l15.695-258.065.1-.9a23 23 0 0 0 .1-2.6 47.68 47.68 0 0 0-47.583-47.493"/>
 </svg>

From c49989bb3c664c5435047262c3b59e33e097bb43 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 11:47:50 +0100
Subject: [PATCH 28/39] typo

---
 site/content/docs/5.3/extend/icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index b5cde0cb4e..d47ab3d55f 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -161,7 +161,7 @@ Purely **decorative icons** (like repeating information of an adjacent text) mus
 #### 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 at attribute directly.
+For external images, you can also fill the `alt` attribute directly.
 
 {{< example class="mt-0" >}}
 <button type="button" class="btn btn-icon btn-outline-secondary">

From 9de999be9236053734b5d906b921b6c670a2a347 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 13:54:43 +0100
Subject: [PATCH 29/39] Update site/content/docs/5.3/utilities/colors.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/utilities/colors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index afb4ee25d8..9d2d7f8b9d 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -21,7 +21,7 @@ Please refer to our [Orange's colors]({{< docsref "/utilities/colors#oranges-col
 {{< /design-callout-alert >}}
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
-If you want to colorize icons, see [icons documentation]({{< docsref "extend/icons#modify-icons-color" >}}).
+To colorize icons, please refer to our [icon color documentation]({{< docsref "extend/icons#modify-icons-color" >}}).
 
 {{< callout info >}}
 Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.

From 512b3517b61b2dff6e851366003b0f780881b431 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 13:55:23 +0100
Subject: [PATCH 30/39] Update site/content/docs/5.3/utilities/colors.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/utilities/colors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 9d2d7f8b9d..f11e6eae58 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -67,7 +67,7 @@ The `.text-primary` color on dark background (`#ff7900`) can be used in any size
 When the interface allows to switch between light and dark backgrounds, the light mode stricter restrictions must be applied!
 {{< /callout >}}
 
-Go to [icons documentation]({{< docsref "extend/icons#modify-icons-color" >}}) to see how to use text utilities with icons.
+Please refer to our [icon color documentation]({{< docsref "extend/icons#modify-icons-color" >}}) to see how to use these text utilities with icons.
 
 Here are some compliant combinations examples for texts:
 

From 351c24af7799dd312a095dbac7b2c54b04cdb980 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 13:56:00 +0100
Subject: [PATCH 31/39] Update site/content/docs/5.3/extend/icons.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/extend/icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index d47ab3d55f..84bed6533e 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -14,7 +14,7 @@ While Boosted doesn't include an icon set by default, Orange does have its own c
 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 Icon Library user documentation for full design and development guidelines.
 
-They are not open-source though and should only be used for Orange branded projects. Please refer to the [icons license file]({{< param icons_license >}}) for legal information.
+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.
 
 ## Use Solaris icons
 

From 1fb01b3ba13ce6839b82f34035cfa9d75deb9daa Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 13:56:12 +0100
Subject: [PATCH 32/39] Update site/content/docs/5.3/extend/icons.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/extend/icons.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 84bed6533e..26923f080b 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -31,7 +31,8 @@ See Solaris icons library [develop documentation]({{< param icons_doc >}}) for c
 
 All icons can be retrieved easily in any of these formats in the Solaris icons finder, except for the specific case of [warning icon]({{< docsref "extend/icons#warning-icon" >}}) which can be copied below.
 
-### SVG Sprite
+### SVG sprite
+
 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—and insert an icon through the `<use>` element.

From 229cde534d2bf2983465b856b1833bd5e773be13 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 14:07:51 +0100
Subject: [PATCH 33/39] Update site/assets/scss/_component-examples.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/assets/scss/_component-examples.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 5f80cd62f0..2b558c1c33 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -488,7 +488,7 @@
   height: 2rem;
   vertical-align: bottom;
   content: "";
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3cpath 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'/%3e%3c/svg%3e");
+  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;
 }
 // scss-docs-end icon-warning

From ab37a61919bc2d94aab347e644da0f1d63b2c325 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 14:07:58 +0100
Subject: [PATCH 34/39] Update site/assets/scss/_component-examples.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/assets/scss/_component-examples.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 2b558c1c33..834f43b80a 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -477,7 +477,7 @@
   content: "";
   background-color: var(--bs-body-color);
   background-size: contain;
-  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath 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' /%3e%3c/svg%3e");
+  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>");
 }
 // scss-docs-end icon-home
 

From 578094b104bc6f0ac30085d3a5b603c692ed477a Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 15:10:55 +0100
Subject: [PATCH 35/39] typo + links

---
 hugo.yml                              | 3 ++-
 site/content/docs/5.3/extend/icons.md | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/hugo.yml b/hugo.yml
index f352e896f5..a3f20a2d18 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -72,7 +72,8 @@ params:
   blog:                             "https://blog.getbootstrap.com/"
   icons:                            "https://oran.ge/icons"
   icons_license:                    "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
-  icons_doc:                        "https://design.orange.com/0c1af118d/p/92bb17-usage"
+  icons_usage:                      "https://design.orange.com/0c1af118d/p/92bb17-usage"
+  icons_develop:                    "https://design.orange.com/0c1af118d/p/12bc75-develop"
   bootstrap:                        "https://getbootstrap.com"
   ods:
     web:                            "https://oran.ge/dsweb"
diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 26923f080b..9d345238ba 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Icons
-description: Guidance and suggestions for using Solaris icon library with Boosted.
+description: Guidance and suggestions for using Solaris icons library with Boosted.
 group: extend
 aliases:
   - "/docs/extend/icons/"
@@ -12,7 +12,7 @@ While Boosted doesn't include an icon set by default, Orange does have its own c
 
 [Solaris icons library]({{< param icons >}}) is a growing library of icons that are designed by [Orange's Group Design Team](https://system.design.orange.com/).
 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 Icon Library user documentation for full design and development guidelines.
+Please refer to the Solaris icons library [usage documentation]({{< param icons_usage >}}) 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]({{< param icons_license >}}) for legal information.
 
@@ -27,7 +27,7 @@ There are many ways to use Solaris icons in a web page:
   - [SVG external image]({{< docsref "extend/icons#svg-external-image" >}})
   - [CSS background SVG]({{< docsref "extend/icons#css-background-svg" >}})
 
-See Solaris icons library [develop documentation]({{< param icons_doc >}}) for complete information about the different formats and their pros and cons.
+See Solaris icons library [development documentation]({{< param icons_develop >}}) 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]({{< docsref "extend/icons#warning-icon" >}}) which can be copied below.
 
@@ -36,7 +36,7 @@ All icons can be retrieved easily in any of these formats in the Solaris icons f
 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—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]({{< docsref "/utilities/colors" >}}) or local style.
+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]({{< docsref "/utilities/colors#oranges-colors" >}}) or local style.
 
 {{< example >}}
 <p class="p-2" data-bs-theme="light">

From ecedc92b8f5a03b6e5eafa43726af65eb5d61404 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 22 Feb 2024 15:17:32 +0100
Subject: [PATCH 36/39] delete useless currentColor

---
 site/static/docs/5.3/assets/img/boosted-warning.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/static/docs/5.3/assets/img/boosted-warning.svg b/site/static/docs/5.3/assets/img/boosted-warning.svg
index 75971b8f1c..9fe5742967 100644
--- a/site/static/docs/5.3/assets/img/boosted-warning.svg
+++ b/site/static/docs/5.3/assets/img/boosted-warning.svg
@@ -1,4 +1,4 @@
-<svg xmlns='http://www.w3.org/2000/svg' fill="currentColor" viewBox="0 0 1000 1000">
+<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 1000 1000">
   <path fill="#fc0" d="M499.352 125a93.95 93.95 0 0 1 81.072 46.494L908.91 733.919A93.676 93.676 0 0 1 827.838 874.9H170.867A93.711 93.711 0 0 1 89.8 733.919l.8-1.3v-.1l327.681-561.025A93.83 93.83 0 0 1 499.352 125"/>
   <path fill="#000" d="M500.352 679.926a47.494 47.494 0 1 0 47.484 47.494 47.53 47.53 0 0 0-47.484-47.494m0-379.949a47.53 47.53 0 0 0-47.483 47.493 28 28 0 0 0 .1 2.9l15.694 258.665v.5c.3 17.1 14.395 23.5 31.689 23.5 17.494 0 31.689-6.6 31.689-24l15.695-258.065.1-.9a23 23 0 0 0 .1-2.6 47.68 47.68 0 0 0-47.583-47.493"/>
 </svg>

From e36484b9308ce52f1126b3196ca78c16c1862930 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Fri, 23 Feb 2024 06:55:45 +0100
Subject: [PATCH 37/39] Update site/content/docs/5.3/extend/icons.md

---
 site/content/docs/5.3/extend/icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 9d345238ba..d5a4ecf192 100644
--- a/site/content/docs/5.3/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
@@ -10,7 +10,7 @@ toc: true
 
 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]({{< param icons >}}) is a growing library of icons that are designed by [Orange's Group Design Team](https://system.design.orange.com/).
+[Solaris icons library]({{< param icons >}}) is a growing library of icons that are designed by [Orange Design System design team](https://system.design.orange.com/).
 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]({{< param icons_usage >}}) for full design and development guidelines.
 

From 478ec5ec790ad9a1a828564898aa5decd57fbb9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Fri, 23 Feb 2024 06:58:15 +0100
Subject: [PATCH 38/39] Reorder alphabetically `icons_` Hugo vars

---
 hugo.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hugo.yml b/hugo.yml
index a3f20a2d18..30196f05d5 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -71,9 +71,9 @@ params:
   twitter:                          "getbootstrap"
   blog:                             "https://blog.getbootstrap.com/"
   icons:                            "https://oran.ge/icons"
+  icons_develop:                    "https://design.orange.com/0c1af118d/p/12bc75-develop"
   icons_license:                    "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
   icons_usage:                      "https://design.orange.com/0c1af118d/p/92bb17-usage"
-  icons_develop:                    "https://design.orange.com/0c1af118d/p/12bc75-develop"
   bootstrap:                        "https://getbootstrap.com"
   ods:
     web:                            "https://oran.ge/dsweb"

From 5c4875c4cbf5a19df09695e356efd5bdf4ddb5cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Fri, 23 Feb 2024 10:47:32 +0100
Subject: [PATCH 39/39] Add migration guide note

---
 site/content/docs/5.3/migration.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index a93b3dce41..1ea655c530 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -535,6 +535,8 @@ All the examples have a mode selector on the bottom right corner to switch betwe
 
 - <span class="badge text-bg-success">New</span> [Customize > Color theme]({{< docsref "/customize/color-theme" >}}) page has been added.
 
+- <span class="badge text-bg-warning">Warning</span> [Extend > Icons]({{< docsref "/extend/icons" >}}) page has been refactored to reflect our recommendation to use Solaris icons in Orange projects.
+
 - <span class="badge text-bg-warning">Warning</span> If you were using our `#check2` icon, please note that its content has been changed.
 
 ## v5.3.2