#3147 icon: add smaller icons

Signed-off-by: Patrizio Bekerle <[email protected]>
pbek · Nov 12, 2024 · eebc5fc · eebc5fc
1 parent 8ca72da
commit eebc5fc
Showing 1 changed file with 53 additions and 12 deletions.
diff --git a/icons/icons.html b/icons/icons.html
@@ -54,53 +54,94 @@
       justify-content: center;
       align-items: center;
       margin-top: 20px;
+      gap: 40px;
     }
 
-    .icon {
+    .icon-set {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .icon-large {
       width: 100px;
       height: 100px;
-      margin: 0 20px;
+    }
+
+    .icon-small {
+      width: 32px;
+      height: 32px;
     }
   </style>
 </head>
 <body>
   <div class="light-bg">
     <h2>Light Background</h2>
     <div class="icon-container">
-      <img src="icon.svg" alt="Icon" class="icon">
-      <img src="icon-dark.svg" alt="Dark Icon" class="icon">
+      <div class="icon-set">
+        <img src="icon.svg" alt="Icon" class="icon-large">
+        <img src="icon.svg" alt="Icon" class="icon-small">
+      </div>
+      <div class="icon-set">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-large">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-small">
+      </div>
     </div>
   </div>
 
   <div class="dark-bg">
     <h2>Dark Background</h2>
     <div class="icon-container">
-      <img src="icon.svg" alt="Icon" class="icon">
-      <img src="icon-dark.svg" alt="Dark Icon" class="icon">
+      <div class="icon-set">
+        <img src="icon.svg" alt="Icon" class="icon-large">
+        <img src="icon.svg" alt="Icon" class="icon-small">
+      </div>
+      <div class="icon-set">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-large">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-small">
+      </div>
     </div>
   </div>
 
   <div class="blue-bg">
     <h2>Blue Background</h2>
     <div class="icon-container">
-      <img src="icon.svg" alt="Icon" class="icon">
-      <img src="icon-dark.svg" alt="Dark Icon" class="icon">
+      <div class="icon-set">
+        <img src="icon.svg" alt="Icon" class="icon-large">
+        <img src="icon.svg" alt="Icon" class="icon-small">
+      </div>
+      <div class="icon-set">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-large">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-small">
+      </div>
     </div>
   </div>
 
   <div class="green-bg">
     <h2>Green Background</h2>
     <div class="icon-container">
-      <img src="icon.svg" alt="Icon" class="icon">
-      <img src="icon-dark.svg" alt="Dark Icon" class="icon">
+      <div class="icon-set">
+        <img src="icon.svg" alt="Icon" class="icon-large">
+        <img src="icon.svg" alt="Icon" class="icon-small">
+      </div>
+      <div class="icon-set">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-large">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-small">
+      </div>
     </div>
   </div>
 
   <div class="red-bg">
     <h2>Red Background</h2>
     <div class="icon-container">
-      <img src="icon.svg" alt="Icon" class="icon">
-      <img src="icon-dark.svg" alt="Dark Icon" class="icon">
+      <div class="icon-set">
+        <img src="icon.svg" alt="Icon" class="icon-large">
+        <img src="icon.svg" alt="Icon" class="icon-small">
+      </div>
+      <div class="icon-set">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-large">
+        <img src="icon-dark.svg" alt="Dark Icon" class="icon-small">
+      </div>
     </div>
   </div>
 </body>