@ivds/core 0.1.1 → 1.0.0

package/src/icons/icons.stories.js

@@ -1,249 +1,353 @@
+/**
+ * IVDS Icon System
+ * Flexible, colorable icons using CSS mask-image
+ */
+
 export default {
-  title: 'Core/Icons',
+  title: 'Foundation/Icons',
   parameters: {
     docs: {
       description: {
-        component: 'Icon system for the IVDS Core package. Icons support both SVG and Unicode fallbacks, with multiple sizes and color variants.'
-      }
+        component: 'IVDS icons use CSS mask-image for flexible, colorable icons that inherit color from their parent element.',
+      },
     },
-    a11y: {
-      config: {
-        rules: [
-          {
-            id: 'color-contrast',
-            enabled: true
-          }
-        ]
-      }
-    }
-  }
+  },
 };
 
-export const AllIcons = () => `
-  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding: 1rem;">
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--arrow-left ivds-icon--2xl"></span>
-      </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">arrow-left</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--arrow-right ivds-icon--2xl"></span>
-      </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">arrow-right</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--success"></span>
-      </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">check</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--close ivds-icon--2xl"></span>
-      </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">close</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--info ivds-icon--2xl ivds-icon--info"></span>
-      </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">info</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--warning ivds-icon--2xl ivds-icon--warning"></span>
-      </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">warning</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--error ivds-icon--2xl ivds-icon--error"></span>
+// Common icons for quick reference
+const commonIcons = [
+  'check', 'cross', 'info-circle', 'alert-circle', 'question-circle',
+  'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
+  'plus', 'minus', 'search', 'menu-hamburger', 'menu-dots',
+  'home', 'user', 'envelope', 'phone', 'calendar',
+  'heart', 'star', 'trash', 'pen', 'download'
+];
+
+// All available icons
+const allIcons = [
+  'alert-circle', 'alert-circle-fill', 'angle-down', 'angle-left', 'angle-right', 'angle-up',
+  'arrow-bottom-left', 'arrow-bottom-right', 'arrow-down', 'arrow-left', 'arrow-redo',
+  'arrow-right', 'arrow-right-dashed', 'arrow-top-left', 'arrow-top-right', 'arrow-undo', 'arrow-up',
+  'at-sign', 'bag-cogwheel', 'bell', 'bell-crossed', 'binoculars', 'box', 'cake',
+  'calendar', 'calendar-clock', 'calendar-cross', 'calendar-event', 'calendar-plus', 'calendar-recurring',
+  'camera', 'check', 'check-circle', 'check-circle-fill', 'children',
+  'clock', 'clock-cross', 'clock-plus', 'coffee-cup-saucer', 'cogwheel', 'cogwheels',
+  'collapse', 'company', 'copy', 'cross', 'cross-circle', 'cross-circle-fill',
+  'customer-bot-negative', 'customer-bot-neutral', 'customer-bot-positive',
+  'discord', 'display', 'document', 'document-blank', 'document-blank-group', 'document-group',
+  'download', 'download-cloud', 'drag', 'entrepreneur', 'envelope',
+  'error', 'error-fill', 'euro-sign', 'eye', 'eye-crossed',
+  'face-neutral', 'face-sad', 'face-smile', 'facebook', 'family',
+  'folder', 'folder-group', 'globe', 'google', 'graph-columns', 'group',
+  'hammers', 'headphones', 'heart', 'heart-fill', 'history', 'home', 'home-smoke',
+  'info-circle', 'info-circle-fill', 'instagram', 'key', 'layers', 'lightbulb',
+  'link', 'link-external', 'linkedin', 'locate', 'location', 'lock', 'lock-open',
+  'map', 'menu-dots', 'menu-hamburger', 'microphone', 'microphone-crossed',
+  'minus', 'minus-circle', 'minus-circle-fill', 'mobile', 'money-bag', 'money-bag-fill',
+  'mover', 'occupation', 'paperclip', 'pen', 'pen-line',
+  'person-female', 'person-genderless', 'person-male', 'person-wheelchair',
+  'phone', 'photo', 'photo-plus',
+  'playback-fastforward', 'playback-next', 'playback-pause', 'playback-play',
+  'playback-previous', 'playback-record', 'playback-rewind', 'playback-stop',
+  'plus', 'plus-circle', 'plus-circle-fill', 'podcast', 'printer',
+  'question-circle', 'question-circle-fill', 'refresh', 'restaurant', 'rss',
+  'save-diskette', 'save-diskette-fill', 'scroll', 'scroll-cogwheel', 'scroll-content', 'scroll-group',
+  'search', 'senior', 'share', 'shield', 'shopping-cart', 'signin', 'signout', 'sitemap', 'sliders',
+  'snapchat', 'sort', 'sort-alphabetical-ascending', 'sort-alphabetical-descending',
+  'sort-ascending', 'sort-descending', 'speechbubble', 'speechbubble-text',
+  'star', 'star-fill', 'swap-user', 'text-bold', 'text-italic', 'text-tool',
+  'thumbs-down', 'thumbs-down-fill', 'thumbs-up', 'thumbs-up-fill',
+  'ticket', 'tiktok', 'trash', 'traveler', 'twitch', 'twitter',
+  'upload', 'upload-cloud', 'user', 'vaccine',
+  'videocamera', 'videocamera-crossed', 'vimeo', 'virus',
+  'volume-high', 'volume-low', 'volume-minus', 'volume-mute', 'volume-plus',
+  'whatsapp', 'wifi', 'wifi-crossed', 'x', 'yle', 'youth', 'youtube',
+  'zoom-in', 'zoom-out', 'zoom-text'
+];
+
+export const CommonIcons = () => `
+  <style>
+    .icon-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 1.5rem;
+      padding: 1rem;
+    }
+    .icon-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 1rem;
+      border: 2px solid var(--color-semantic-neutral-200, #e2e8f0);
+      border-radius: 4px;
+      text-align: center;
+      transition: all 0.2s;
+    }
+    .icon-item:hover {
+      border-color: var(--color-brand-primary-600, #e13b1f);
+      background-color: var(--color-semantic-neutral-50, #f8fafc);
+    }
+    .icon-name {
+      font-size: 0.75rem;
+      color: var(--color-semantic-neutral-600, #475569);
+      word-break: break-word;
+    }
+  </style>
+  <div class="icon-grid">
+    ${commonIcons.map(icon => `
+      <div class="icon-item">
+        <span class="ivds-icon ivds-icon--${icon} ivds-icon--size-l"></span>
+        <span class="icon-name">${icon}</span>
       </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">error</div>
-    </div>
-    
-    <div style="text-align: center;">
-      <div style="margin-bottom: 0.5rem;">
-        <span class="ivds-icon ivds-icon--success ivds-icon--2xl ivds-icon--success"></span>
+    `).join('')}
+  </div>
+`;
+
+export const AllIcons = () => `
+  <style>
+    .icon-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+      gap: 1rem;
+      padding: 1rem;
+    }
+    .icon-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.75rem;
+      border: 1px solid var(--color-semantic-neutral-200, #e2e8f0);
+      border-radius: 4px;
+      text-align: center;
+      transition: all 0.2s;
+    }
+    .icon-item:hover {
+      border-color: var(--color-brand-primary-600, #e13b1f);
+      background-color: var(--color-semantic-neutral-50, #f8fafc);
+    }
+    .icon-name {
+      font-size: 0.625rem;
+      color: var(--color-semantic-neutral-600, #475569);
+      word-break: break-word;
+    }
+  </style>
+  <div class="icon-grid">
+    ${allIcons.map(icon => `
+      <div class="icon-item">
+        <span class="ivds-icon ivds-icon--${icon} ivds-icon--size-m"></span>
+        <span class="icon-name">${icon}</span>
       </div>
-      <div style="font-size: 0.875rem; color: #6b7280;">success</div>
-    </div>
+    `).join('')}
   </div>
 `;
 
 export const Sizes = () => `
-  <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--xs"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">xs</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--sm"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">sm</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--md"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">md</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--lg"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">lg</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--xl"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">xl</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--2xl"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">2xl</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--3xl"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">3xl</span>
+  <style>
+    .size-demo {
+      display: flex;
+      gap: 2rem;
+      align-items: center;
+      padding: 2rem;
+      flex-wrap: wrap;
+    }
+    .size-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .size-label {
+      font-size: 0.875rem;
+      color: var(--color-semantic-neutral-600, #475569);
+      font-weight: 600;
+    }
+  </style>
+  <div class="size-demo">
+    <div class="size-item">
+      <span class="ivds-icon ivds-icon--check ivds-icon--size-xs"></span>
+      <span class="size-label">XS (1rem)</span>
+    </div>
+    <div class="size-item">
+      <span class="ivds-icon ivds-icon--check ivds-icon--size-s"></span>
+      <span class="size-label">S (1.5rem)</span>
+    </div>
+    <div class="size-item">
+      <span class="ivds-icon ivds-icon--check ivds-icon--size-m"></span>
+      <span class="size-label">M (2rem)</span>
+    </div>
+    <div class="size-item">
+      <span class="ivds-icon ivds-icon--check ivds-icon--size-l"></span>
+      <span class="size-label">L (2.5rem)</span>
+    </div>
+    <div class="size-item">
+      <span class="ivds-icon ivds-icon--check ivds-icon--size-xl"></span>
+      <span class="size-label">XL (3rem)</span>
     </div>
   </div>
 `;
 
 export const Colors = () => `
-  <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--2xl"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">default</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--primary"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">primary</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--secondary"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">secondary</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--success"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">success</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--warning ivds-icon--2xl ivds-icon--warning"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">warning</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--error ivds-icon--2xl ivds-icon--error"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">error</span>
-    </div>
-    
-    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-      <span class="ivds-icon ivds-icon--info ivds-icon--2xl ivds-icon--info"></span>
-      <span style="font-size: 0.75rem; color: #6b7280;">info</span>
+  <style>
+    .color-demo {
+      display: flex;
+      gap: 2rem;
+      padding: 2rem;
+      flex-wrap: wrap;
+    }
+    .color-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .color-label {
+      font-size: 0.875rem;
+      color: var(--color-semantic-neutral-600, #475569);
+    }
+  </style>
+  <div class="color-demo">
+    <div class="color-item">
+      <span class="ivds-icon ivds-icon--heart-fill ivds-icon--size-l" style="color: #ef4444;"></span>
+      <span class="color-label">Red</span>
+    </div>
+    <div class="color-item">
+      <span class="ivds-icon ivds-icon--check-circle-fill ivds-icon--size-l" style="color: #10b981;"></span>
+      <span class="color-label">Green</span>
+    </div>
+    <div class="color-item">
+      <span class="ivds-icon ivds-icon--info-circle-fill ivds-icon--size-l" style="color: #3b82f6;"></span>
+      <span class="color-label">Blue</span>
+    </div>
+    <div class="color-item">
+      <span class="ivds-icon ivds-icon--alert-circle-fill ivds-icon--size-l" style="color: #f59e0b;"></span>
+      <span class="color-label">Orange</span>
+    </div>
+    <div class="color-item">
+      <span class="ivds-icon ivds-icon--star-fill ivds-icon--size-l" style="color: #8b5cf6;"></span>
+      <span class="color-label">Purple</span>
     </div>
   </div>
 `;
 
-export const Interactive = () => `
-  <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
-    <button style="background: none; border: none; cursor: pointer; padding: 0.5rem;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--interactive ivds-icon--success"></span>
+export const InButtons = () => `
+  <style>
+    .button-demo {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding: 2rem;
+    }
+  </style>
+  <div class="button-demo">
+    <button class="ivds-button ivds-button--primary ivds-icon-start--check">
+      Save Changes
     </button>
-    
-    <button style="background: none; border: none; cursor: pointer; padding: 0.5rem;">
-      <span class="ivds-icon ivds-icon--close ivds-icon--2xl ivds-icon--interactive"></span>
+    <button class="ivds-button ivds-button--primary ivds-icon-end--arrow-right">
+      Next Step
     </button>
-    
-    <button style="background: none; border: none; cursor: pointer; padding: 0.5rem;">
-      <span class="ivds-icon ivds-icon--arrow-right ivds-icon--2xl ivds-icon--interactive ivds-icon--primary"></span>
+    <button class="ivds-button ivds-button--secondary ivds-icon-start--download">
+      Download File
     </button>
-    
-    <button style="background: none; border: none; cursor: not-allowed; padding: 0.5rem;" disabled>
-      <span class="ivds-icon ivds-icon--info ivds-icon--2xl ivds-icon--disabled"></span>
+    <button class="ivds-button ivds-button--secondary ivds-icon-end--link-external">
+      Open External Link
     </button>
   </div>
-  <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
-    Hover over the interactive icons to see the scale effect. The last icon is disabled.
-  </p>
 `;
 
-export const InContext = () => `
-  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-    <!-- Button with icon -->
-    <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #0ea5e9; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">
-      <span class="ivds-icon ivds-icon--check ivds-icon--sm"></span>
-      Save Changes
-    </button>
-    
-    <!-- Alert with icon -->
-    <div style="display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 0.375rem;">
-      <span class="ivds-icon ivds-icon--warning ivds-icon--warning"></span>
-      <div>
-        <h4 style="margin: 0 0 0.25rem 0; font-weight: 600; color: #92400e;">Warning</h4>
-        <p style="margin: 0; color: #92400e;">This action cannot be undone.</p>
-      </div>
-    </div>
-    
-    <!-- Navigation with icons -->
-    <nav style="display: flex; gap: 1rem;">
-      <a href="#" style="display: flex; align-items: center; gap: 0.5rem; color: #374151; text-decoration: none;">
-        <span class="ivds-icon ivds-icon--arrow-left ivds-icon--sm"></span>
-        Previous
-      </a>
-      <a href="#" style="display: flex; align-items: center; gap: 0.5rem; color: #374151; text-decoration: none;">
-        Next
-        <span class="ivds-icon ivds-icon--arrow-right ivds-icon--sm"></span>
-      </a>
-    </nav>
-    
-    <!-- Input with icon -->
-    <div style="position: relative; max-width: 300px;">
-      <span class="ivds-icon ivds-icon--info ivds-icon--sm" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280;"></span>
-      <input type="text" placeholder="Enter information..." style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
-    </div>
+export const InText = () => `
+  <style>
+    .text-demo {
+      padding: 2rem;
+      max-width: 600px;
+    }
+    .text-demo p {
+      margin-bottom: 1rem;
+      line-height: 1.6;
+    }
+  </style>
+  <div class="text-demo">
+    <p>
+      Icons inherit the text color automatically. 
+      <span class="ivds-icon ivds-icon--check" style="color: green;"></span>
+      This makes them perfect for inline use.
+    </p>
+    <p style="color: #3b82f6;">
+      When you change the text color, 
+      <span class="ivds-icon ivds-icon--info-circle"></span>
+      the icon color changes too!
+    </p>
+    <p style="font-size: 1.5rem;">
+      Icons also scale with font size 
+      <span class="ivds-icon ivds-icon--heart"></span>
+      automatically.
+    </p>
   </div>
 `;
 
-export const UsageExamples = () => `
-  <div style="font-family: monospace; background: #f9fafb; padding: 1rem; border-radius: 0.375rem;">
-    <h3 style="margin-top: 0;">HTML Usage Examples:</h3>
-    
-    <div style="margin-bottom: 1rem;">
-      <strong>Basic icon:</strong><br>
-      <code>&lt;span class="ivds-icon ivds-icon--check"&gt;&lt;/span&gt;</code>
-    </div>
-    
-    <div style="margin-bottom: 1rem;">
-      <strong>Icon with size and color:</strong><br>
-      <code>&lt;span class="ivds-icon ivds-icon--warning ivds-icon--lg ivds-icon--warning"&gt;&lt;/span&gt;</code>
-    </div>
-    
-    <div style="margin-bottom: 1rem;">
-      <strong>Interactive icon:</strong><br>
-      <code>&lt;button&gt;&lt;span class="ivds-icon ivds-icon--close ivds-icon--interactive"&gt;&lt;/span&gt;&lt;/button&gt;</code>
-    </div>
-    
-    <div style="margin-bottom: 1rem;">
-      <strong>Disabled icon:</strong><br>
-      <code>&lt;span class="ivds-icon ivds-icon--info ivds-icon--disabled"&gt;&lt;/span&gt;</code>
-    </div>
-    
-    <div>
-      <strong>Force Unicode fallback (no SVG):</strong><br>
-      <code>&lt;span class="ivds-icon ivds-icon--check ivds-icon--no-svg"&gt;&lt;/span&gt;</code>
+export const UsageExample = () => `
+  <style>
+    .usage-demo {
+      padding: 2rem;
+      max-width: 800px;
+    }
+    .code-block {
+      background: var(--color-semantic-neutral-900, #0f172a);
+      color: var(--color-semantic-neutral-50, #f8fafc);
+      padding: 1rem;
+      border-radius: 4px;
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      margin: 1rem 0;
+      overflow-x: auto;
+    }
+    .example-output {
+      padding: 1rem;
+      border: 2px solid var(--color-semantic-neutral-200, #e2e8f0);
+      border-radius: 4px;
+      margin: 1rem 0;
+    }
+  </style>
+  <div class="usage-demo">
+    <h3>Basic Icon</h3>
+    <div class="code-block">
+&lt;span class="ivds-icon ivds-icon--check ivds-icon--size-m"&gt;&lt;/span&gt;
+    </div>
+    <div class="example-output">
+      <span class="ivds-icon ivds-icon--check ivds-icon--size-m"></span>
+    </div>
+
+    <h3>Colored Icon</h3>
+    <div class="code-block">
+&lt;span class="ivds-icon ivds-icon--heart-fill ivds-icon--size-l" style="color: red;"&gt;&lt;/span&gt;
+    </div>
+    <div class="example-output">
+      <span class="ivds-icon ivds-icon--heart-fill ivds-icon--size-l" style="color: red;"></span>
+    </div>
+
+    <h3>Icon in Button (Prefix)</h3>
+    <div class="code-block">
+&lt;button class="ivds-button ivds-icon-start--check"&gt;
+  Save Changes
+&lt;/button&gt;
+    </div>
+    <div class="example-output">
+      <button class="ivds-button ivds-button--primary ivds-icon-start--check">
+        Save Changes
+      </button>
+    </div>
+
+    <h3>Icon in Button (Suffix)</h3>
+    <div class="code-block">
+&lt;button class="ivds-button ivds-icon-end--arrow-right"&gt;
+  Next Step
+&lt;/button&gt;
+    </div>
+    <div class="example-output">
+      <button class="ivds-button ivds-button--primary ivds-icon-end--arrow-right">
+        Next Step
+      </button>
     </div>
   </div>
-`;
+`;

package/src/icons/info-circle-fill.scss

@@ -0,0 +1,12 @@
+.ivds-icon--info-circle-fill {
+  --mask-image-info-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%203C7.02944%203%203%207.02944%203%2012C3%2016.9706%207.02944%2021%2012%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203ZM13%2010V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125%206C12.5374%206%2013.125%206.5876%2013.125%207.3125C13.125%208.03735%2012.5374%208.625%2011.8125%208.625C11.0876%208.625%2010.5%208.03735%2010.5%207.3125C10.5%206.5876%2011.0876%206%2011.8125%206Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-info-circle-fill);
+}
+
+.ivds-icon-start--info-circle-fill {
+  --mask-image-before: var(--mask-image-info-circle-fill);
+}
+
+.ivds-icon-end--info-circle-fill {
+  --mask-image-after: var(--mask-image-info-circle-fill);
+}

package/src/icons/info-circle.scss

@@ -0,0 +1,12 @@
+.ivds-icon--info-circle {
+  --mask-image-info-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202ZM12%204C7.58172%204%204%207.58172%204%2012C4%2016.4183%207.58172%2020%2012%2020C16.4183%2020%2020%2016.4183%2020%2012C20%207.58172%2016.4183%204%2012%204ZM13%2010V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125%206C12.5374%206%2013.125%206.5876%2013.125%207.3125C13.125%208.03735%2012.5374%208.625%2011.8125%208.625C11.0876%208.625%2010.5%208.03735%2010.5%207.3125C10.5%206.5876%2011.0876%206%2011.8125%206Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-info-circle);
+}
+
+.ivds-icon-start--info-circle {
+  --mask-image-before: var(--mask-image-info-circle);
+}
+
+.ivds-icon-end--info-circle {
+  --mask-image-after: var(--mask-image-info-circle);
+}

package/src/icons/instagram.scss

@@ -0,0 +1,12 @@
+.ivds-icon--instagram {
+  --mask-image-instagram: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.0714%203C20.0855%203%2020.9173%203.78353%2020.9942%204.7779L21%204.92857V19.0714C21%2020.0855%2020.2165%2020.9173%2019.2221%2020.9942L19.0714%2021H4.92857C3.91454%2021%203.08273%2020.2165%203.0058%2019.2221L3%2019.0714V4.92857C3%203.91454%203.78353%203.08273%204.7779%203.0058L4.92857%203H19.0714ZM9.11255%205.04919C7.99442%205.10229%207.00123%205.35839%206.17981%206.17669C5.35839%206.99498%205.10541%207.98818%205.04919%209.10943L5.03066%209.54569C4.98433%2010.9687%204.99051%2013.8504%205.04919%2014.8843C5.10229%2016.0056%205.35839%2016.9988%206.17981%2017.8171C7.00123%2018.6354%207.9913%2018.8915%209.11255%2018.9477L9.54882%2018.9662C10.9718%2019.0125%2013.8535%2019.0064%2014.8875%2018.9477C16.0087%2018.8946%2017.0019%2018.6385%2017.8202%2017.8171C18.6385%2016.9988%2018.8946%2016.0056%2018.9508%2014.8843L18.9693%2014.4482C19.0157%2013.0257%2019.0095%2010.1465%2018.9508%209.11255C18.8977%207.9913%2018.6416%206.9981%2017.8202%206.17981C17.0019%205.36152%2016.0087%205.10541%2014.8875%205.04919L14.4512%205.03066C13.0282%204.98433%2010.1465%204.99051%209.11255%205.04919ZM12.0016%206.26101L13.0197%206.25364C14.097%206.24924%2015.454%206.27642%2016.1274%206.54211C16.7395%206.78572%2017.2112%207.25733%2017.4579%207.87262C17.8233%208.79398%2017.739%2010.9803%2017.739%2011.9984L17.7474%2013.3166C17.7452%2014.335%2017.7015%2015.5121%2017.4579%2016.1243C17.2143%2016.7364%2016.7427%2017.208%2016.1274%2017.4548C15.206%2017.8202%2013.0197%2017.7359%2012.0016%2017.7359L10.9835%2017.7432C9.90609%2017.7476%208.54911%2017.7205%207.87574%2017.4548C7.26358%2017.2112%206.79197%2016.7395%206.54523%2016.1243C6.17981%2015.2029%206.26414%2013.0166%206.26414%2011.9984L6.25676%2010.9803C6.25237%209.90297%206.27955%208.54599%206.54523%207.87262C6.78885%207.26046%207.26046%206.78885%207.87574%206.54211C8.7971%206.17669%2010.9834%206.26101%2012.0016%206.26101ZM12.0016%208.40982C10.0152%208.40982%208.41294%2010.012%208.41294%2011.9984C8.41294%2013.9848%2010.0152%2015.5871%2012.0016%2015.5871C13.988%2015.5871%2015.5902%2013.9848%2015.5902%2011.9984C15.5902%2010.012%2013.988%208.40982%2012.0016%208.40982ZM12.0016%209.66537C13.2883%209.66537%2014.3346%2010.7117%2014.3346%2011.9984C14.3346%2013.2852%2013.2852%2014.3315%2012.0016%2014.3315C10.7179%2014.3315%209.66849%2013.2852%209.66849%2011.9984C9.66849%2010.7117%2010.7148%209.66537%2012.0016%209.66537ZM15.737%207.42599C15.2747%207.42599%2014.8999%207.80078%2014.8999%208.26302C14.8999%208.72526%2015.2716%209.10006%2015.737%209.10006C16.1992%209.10006%2016.574%208.72839%2016.574%208.26302C16.574%207.80078%2016.1992%207.42599%2015.737%207.42599Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-instagram);
+}
+
+.ivds-icon-start--instagram {
+  --mask-image-before: var(--mask-image-instagram);
+}
+
+.ivds-icon-end--instagram {
+  --mask-image-after: var(--mask-image-instagram);
+}