diff --git a/src/components/BGIcons.astro b/src/components/BGIcons.astro
index c13803415..1fee0cede 100644
--- a/src/components/BGIcons.astro
+++ b/src/components/BGIcons.astro
@@ -2,14 +2,16 @@
 import { icons } from '@connectedhomes/nucleus-util/brands/british-gas';
 ---
 
-<div class="icons not-content">
+<div class="icons">
   {
     icons && 
     icons.map((icon, i) => {
       return (
         <div class="icon">
-          <p>{icon.name}</p>
           <div class="svg" set:html={icon.svg} />
+          <span class="label">
+            <code>{icon.name}</code>
+          </span>
         </div>
       );
     })
@@ -19,13 +21,36 @@ import { icons } from '@connectedhomes/nucleus-util/brands/british-gas';
 <style>
   .icons {
     display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 1rem;
-      row-gap: 2rem;;
+    grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+    gap: 1rem;
+    color: var(--sl-color-white);
+
+    .icon {
+      margin-block-start: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      aspect-ratio: 1 / 1;
+      overflow-wrap: anywhere;
+    }
 
     .svg {
-      height: 4rem;
-      width: 4rem;
+      height: 2rem;
+      width: 2rem;
+
+      svg {
+        fill: currentColor;
+      }
+    }
+
+    .label {
+      text-align: center;
+      line-height: normal;
+
+      code {
+        font-size: var(--sl-text-2xs);
+      }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/BGIllustrations.astro b/src/components/BGIllustrations.astro
index 58ff61d37..ffd422895 100644
--- a/src/components/BGIllustrations.astro
+++ b/src/components/BGIllustrations.astro
@@ -2,14 +2,16 @@
 import { illustrations } from '@connectedhomes/nucleus-util/brands/british-gas';
 ---
 
-<div class="illustrations not-content">
+<div class="illustrations">
   {
     illustrations && 
     illustrations.map((illustration, i) => {
       return (
         <div class="illustration">
-          <p>{illustration.name}</p>
           <div class="svg" set:html={illustration.svg?.replace('<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"', '<svg ')} />
+          <span class="label">
+            <code>{illustration.name}</code>
+          </span>
         </div>
       );
     })
@@ -19,13 +21,36 @@ import { illustrations } from '@connectedhomes/nucleus-util/brands/british-gas';
 <style>
   .illustrations {
     display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 1rem;
-      row-gap: 2rem;;
+    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+    gap: 1rem;
+    color: var(--sl-color-white);
+
+    .illustration {
+      margin-block-start: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      aspect-ratio: 1 / 1;
+      overflow-wrap: anywhere;
+    }
 
     .svg {
       height: 4rem;
       width: 4rem;
+
+      svg {
+        fill: currentColor;
+      }
+    }
+
+    .label {
+      text-align: center;
+      line-height: normal;
+
+      code {
+        font-size: var(--sl-text-2xs);
+      }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/content/docs/guidelines/assets.mdx b/src/content/docs/guidelines/assets.mdx
index e4cf6f7bb..7a020895b 100644
--- a/src/content/docs/guidelines/assets.mdx
+++ b/src/content/docs/guidelines/assets.mdx
@@ -6,7 +6,9 @@ import BGIcons from '@components/BGIcons.astro';
 import BGIllustrations from '@components/BGIllustrations.astro';
 
 ## Icons
+
 <BGIcons />
 
 ## Illustrations
-<BGIllustrations />
\ No newline at end of file
+
+<BGIllustrations />
diff --git a/src/styles/custom.css b/src/styles/custom.css
index fb1fb40b1..b221eeeb2 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -77,6 +77,7 @@
   --sl-color-heading: var(--sl-color-gray-2);
 
   /* Text size and line height */
+  --sl-text-2xs: 0.75rem; /* 12px */
   --sl-text-xs: 0.875rem; /* 14px */
   --sl-text-sm: 0.9375rem; /* 15px */
   --sl-text-base: 1rem; /* 16px */