[WEB-4078] Add navigation icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.2",
+  "version": "15.1.3",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

src/core/Icon/__snapshots__/Icon.stories.tsx.snap

@@ -1638,6 +1638,36 @@ exports[`Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-gui-account
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-account">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-gui-app
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-app">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-arrow-bidirectional-horizontal
@@ -2163,6 +2193,21 @@ exports[`Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-gui-organization
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-organization">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-partial