@ivds/core 0.1.1 → 1.0.0

package/src/icons/_icon.scss

@@ -1,121 +1,82 @@
-// Base icon styles
-// Provides foundational styling for the IVDS icon system with SVG support
+/**
+ * IVDS Icon System
+ * Base icon styles using CSS mask-image for flexible, colorable icons
+ * Icons inherit color from parent via currentColor
+ */
 
-@use '../variables/variables' as vars;
-
-// Base icon mixin for consistent styling
-@mixin icon-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  height: 1em;
-  fill: currentcolor;
+.ivds-icon {
+  background-color: currentcolor;
+  display: inline-block;
+  height: var(--icon-size, 1.5rem);
+  -webkit-mask-image: var(--mask-image);
+  mask-image: var(--mask-image);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  width: var(--icon-size, 1.5rem);
   flex-shrink: 0;
   vertical-align: middle;
-  
-  // SVG specific styles
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: inherit;
-    display: block;
-  }
-  
-  // Fallback for text-based icons
-  &::before {
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
-    line-height: 1;
-  }
 }
 
-// Size mixin for consistent icon sizing
-@mixin icon-size($size) {
-  width: $size;
-  height: $size;
-  font-size: $size;
+/* Size variants */
+.ivds-icon--size-xs {
+  --icon-size: var(--spacing-s, 1rem);
 }
 
-.ivds-icon {
-  @include icon-base;
-  
-  // Default size using design tokens
-  @include icon-size(var(--fontSize-base, 1rem));
-  
-  // Size variations using design tokens
-  &--xs {
-    @include icon-size(var(--fontSize-xs, 0.75rem));
-  }
-  
-  &--sm {
-    @include icon-size(var(--fontSize-sm, 0.875rem));
-  }
-  
-  &--md {
-    @include icon-size(var(--fontSize-base, 1rem));
-  }
-  
-  &--lg {
-    @include icon-size(var(--fontSize-lg, 1.125rem));
-  }
-  
-  &--xl {
-    @include icon-size(var(--fontSize-xl, 1.25rem));
-  }
-  
-  &--2xl {
-    @include icon-size(var(--fontSize-2xl, 1.5rem));
-  }
-  
-  &--3xl {
-    @include icon-size(var(--fontSize-3xl, 1.875rem));
-  }
-  
-  // Color variations
-  &--primary {
-    color: var(--color-brand-primary-500, #0ea5e9);
-  }
-  
-  &--secondary {
-    color: var(--color-semantic-neutral-600, #6b7280);
-  }
-  
-  &--success {
-    color: var(--color-semantic-success-500, #10b981);
-  }
-  
-  &--warning {
-    color: var(--color-semantic-warning-500, #f59e0b);
-  }
-  
-  &--error {
-    color: var(--color-semantic-error-500, #ef4444);
-  }
-  
-  &--info {
-    color: var(--color-brand-primary-500, #0ea5e9);
-  }
-  
-  // Interactive states
-  &--interactive {
-    cursor: pointer;
-    transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
-    
-    &:hover {
-      transform: scale(1.1);
-    }
-    
-    &:active {
-      transform: scale(0.95);
-    }
-  }
-  
-  // Disabled state
-  &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
+.ivds-icon--size-s {
+  --icon-size: var(--spacing-m, 1.5rem);
+}
+
+.ivds-icon--size-m {
+  --icon-size: var(--spacing-l, 2rem);
+}
+
+.ivds-icon--size-l {
+  --icon-size: var(--spacing-xl, 2.5rem);
+}
+
+.ivds-icon--size-xl {
+  --icon-size: var(--spacing-2xl, 3rem);
+}
+
+/* Pseudo-element support for inline icons */
+[class*="ivds-icon-start--"]::before {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 1.5rem);
+  -webkit-mask-image: var(--mask-image-before);
+  mask-image: var(--mask-image-before);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  width: var(--icon-size, 1.5rem);
+  margin-inline-end: var(--spacing-xs, 0.5rem);
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+[class*="ivds-icon-end--"]::after {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 1.5rem);
+  -webkit-mask-image: var(--mask-image-after);
+  mask-image: var(--mask-image-after);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  width: var(--icon-size, 1.5rem);
+  margin-inline-start: var(--spacing-xs, 0.5rem);
+  vertical-align: middle;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,12 @@
+.ivds-icon--alert-circle-fill {
+  --mask-image-alert-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%203C16.9706%203%2021%207.02944%2021%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203ZM13%2016V18H11V16H13ZM13%206V14H11V6H13Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-alert-circle-fill);
+}
+
+.ivds-icon-start--alert-circle-fill {
+  --mask-image-before: var(--mask-image-alert-circle-fill);
+}
+
+.ivds-icon-end--alert-circle-fill {
+  --mask-image-after: var(--mask-image-alert-circle-fill);
+}

package/src/icons/alert-circle.scss

@@ -0,0 +1,12 @@
+.ivds-icon--alert-circle {
+  --mask-image-alert-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%2016V18H11V16H13ZM13%206V14H11V6H13Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-alert-circle);
+}
+
+.ivds-icon-start--alert-circle {
+  --mask-image-before: var(--mask-image-alert-circle);
+}
+
+.ivds-icon-end--alert-circle {
+  --mask-image-after: var(--mask-image-alert-circle);
+}

package/src/icons/angle-down.scss

@@ -0,0 +1,12 @@
+.ivds-icon--angle-down {
+  --mask-image-angle-down: 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%2013.5L17%208.5L18.5%2010L12%2016.5L5.5%2010L7%208.5L12%2013.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-angle-down);
+}
+
+.ivds-icon-start--angle-down {
+  --mask-image-before: var(--mask-image-angle-down);
+}
+
+.ivds-icon-end--angle-down {
+  --mask-image-after: var(--mask-image-angle-down);
+}

package/src/icons/angle-left.scss

@@ -0,0 +1,12 @@
+.ivds-icon--angle-left {
+  --mask-image-angle-left: 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='M10.5%2012L15.5%2017L14%2018.5L7.5%2012L14%205.5L15.5%207L10.5%2012Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-angle-left);
+}
+
+.ivds-icon-start--angle-left {
+  --mask-image-before: var(--mask-image-angle-left);
+}
+
+.ivds-icon-end--angle-left {
+  --mask-image-after: var(--mask-image-angle-left);
+}

package/src/icons/angle-right.scss

@@ -0,0 +1,12 @@
+.ivds-icon--angle-right {
+  --mask-image-angle-right: 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='M13.5%2012L8.5%207L10%205.5L16.5%2012L10%2018.5L8.5%2017L13.5%2012Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-angle-right);
+}
+
+.ivds-icon-start--angle-right {
+  --mask-image-before: var(--mask-image-angle-right);
+}
+
+.ivds-icon-end--angle-right {
+  --mask-image-after: var(--mask-image-angle-right);
+}

package/src/icons/angle-up.scss

@@ -0,0 +1,12 @@
+.ivds-icon--angle-up {
+  --mask-image-angle-up: 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%2011.5L17%2016.5L18.5%2015L12%208.5L5.5%2015L7%2016.5L12%2011.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-angle-up);
+}
+
+.ivds-icon-start--angle-up {
+  --mask-image-before: var(--mask-image-angle-up);
+}
+
+.ivds-icon-end--angle-up {
+  --mask-image-after: var(--mask-image-angle-up);
+}

package/src/icons/arrow-bottom-left.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-bottom-left {
+  --mask-image-arrow-bottom-left: 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='M6.00134%2017.9986H15.0013V15.9986L9.44734%2015.9983L18.0163%207.43054L16.6021%206.01633L8.00134%2014.6163V8.99865H6.00134V17.9986Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-bottom-left);
+}
+
+.ivds-icon-start--arrow-bottom-left {
+  --mask-image-before: var(--mask-image-arrow-bottom-left);
+}
+
+.ivds-icon-end--arrow-bottom-left {
+  --mask-image-after: var(--mask-image-arrow-bottom-left);
+}

package/src/icons/arrow-bottom-right.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-bottom-right {
+  --mask-image-arrow-bottom-right: 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='M18.0163%2017.9986H9.01631V15.9986L14.5703%2015.9983L6.00134%207.43054L7.41556%206.01633L16.0163%2014.6163V8.99865H18.0163V17.9986Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-bottom-right);
+}
+
+.ivds-icon-start--arrow-bottom-right {
+  --mask-image-before: var(--mask-image-arrow-bottom-right);
+}
+
+.ivds-icon-end--arrow-bottom-right {
+  --mask-image-after: var(--mask-image-arrow-bottom-right);
+}

package/src/icons/arrow-down.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-down {
+  --mask-image-arrow-down: 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='M13.5%204V16.4995L17.5%2012.5L19%2014L12.5%2020.5L6%2014L7.5%2012.5L11.5%2016.5V4H13.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-down);
+}
+
+.ivds-icon-start--arrow-down {
+  --mask-image-before: var(--mask-image-arrow-down);
+}
+
+.ivds-icon-end--arrow-down {
+  --mask-image-after: var(--mask-image-arrow-down);
+}

package/src/icons/arrow-left.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-left {
+  --mask-image-arrow-left: 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='M10%205.5L11.5%207L7.5%2011H20V13H7.5L11.5%2017L10%2018.5L3.5%2012L10%205.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-left);
+}
+
+.ivds-icon-start--arrow-left {
+  --mask-image-before: var(--mask-image-arrow-left);
+}
+
+.ivds-icon-end--arrow-left {
+  --mask-image-after: var(--mask-image-arrow-left);
+}

package/src/icons/arrow-redo.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-redo {
+  --mask-image-arrow-redo: 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='M10%2010C7.79086%2010%206%2011.7909%206%2014C6%2016.2091%207.79086%2018%2010%2018H14V20H9.96364L9.812%2019.9981C6.5869%2019.9171%204%2017.2611%204%2014C4%2010.7389%206.5869%208.08285%209.812%208.0019L15.5%208L12%204.5L13.5%203L19.5%209L13.5%2015L12%2013.5L15.5%2010H10Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-redo);
+}
+
+.ivds-icon-start--arrow-redo {
+  --mask-image-before: var(--mask-image-arrow-redo);
+}
+
+.ivds-icon-end--arrow-redo {
+  --mask-image-after: var(--mask-image-arrow-redo);
+}

package/src/icons/arrow-right-dashed.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-right-dashed {
+  --mask-image-arrow-right-dashed: 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%20d='M14%205.5L12.5%207L17.5%2012L12.5%2017L14%2018.5L20.5%2012L14%205.5Z'%20fill='black'/%3E%3Cpath%20d='M15.5%2013L16.5%2012L15.5%2011H14V13H15.5Z'%20fill='black'/%3E%3Cpath%20d='M10%2011H12V13H10V11Z'%20fill='black'/%3E%3Cpath%20d='M8%2013V11H6V13H8Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-right-dashed);
+}
+
+.ivds-icon-start--arrow-right-dashed {
+  --mask-image-before: var(--mask-image-arrow-right-dashed);
+}
+
+.ivds-icon-end--arrow-right-dashed {
+  --mask-image-after: var(--mask-image-arrow-right-dashed);
+}

package/src/icons/arrow-right.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-right {
+  --mask-image-arrow-right: 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='M14%205.5L12.5%207L16.5%2011H4V13H16.5L12.5%2017L14%2018.5L20.5%2012L14%205.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-right);
+}
+
+.ivds-icon-start--arrow-right {
+  --mask-image-before: var(--mask-image-arrow-right);
+}
+
+.ivds-icon-end--arrow-right {
+  --mask-image-after: var(--mask-image-arrow-right);
+}

package/src/icons/arrow-top-left.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-top-left {
+  --mask-image-arrow-top-left: 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='M6.0177%206V15H8.0177L8.01802%209.446L16.5858%2018.015L18%2016.6008L9.40002%208H15.0177V6H6.0177Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-top-left);
+}
+
+.ivds-icon-start--arrow-top-left {
+  --mask-image-before: var(--mask-image-arrow-top-left);
+}
+
+.ivds-icon-end--arrow-top-left {
+  --mask-image-after: var(--mask-image-arrow-top-left);
+}

package/src/icons/arrow-top-right.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-top-right {
+  --mask-image-arrow-top-right: 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='M18%206V15H16L15.9997%209.446L7.43188%2018.015L6.01767%2016.6008L14.6177%208H8.99999V6H18Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-top-right);
+}
+
+.ivds-icon-start--arrow-top-right {
+  --mask-image-before: var(--mask-image-arrow-top-right);
+}
+
+.ivds-icon-end--arrow-top-right {
+  --mask-image-after: var(--mask-image-arrow-top-right);
+}

package/src/icons/arrow-undo.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-undo {
+  --mask-image-arrow-undo: 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='M14%2010C16.2091%2010%2018%2011.7909%2018%2014C18%2016.2091%2016.2091%2018%2014%2018H10V20H14.0364L14.188%2019.9981C17.4131%2019.9171%2020%2017.2611%2020%2014C20%2010.7389%2017.4131%208.08285%2014.188%208.0019L8.5%208L12%204.5L10.5%203L4.5%209L10.5%2015L12%2013.5L8.5%2010H14Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-undo);
+}
+
+.ivds-icon-start--arrow-undo {
+  --mask-image-before: var(--mask-image-arrow-undo);
+}
+
+.ivds-icon-end--arrow-undo {
+  --mask-image-after: var(--mask-image-arrow-undo);
+}

package/src/icons/arrow-up.scss

@@ -0,0 +1,12 @@
+.ivds-icon--arrow-up {
+  --mask-image-arrow-up: 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%203.5L18.5%2010L17%2011.5L13%207.5V20H11V7.5L7%2011.5L5.5%2010L12%203.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-arrow-up);
+}
+
+.ivds-icon-start--arrow-up {
+  --mask-image-before: var(--mask-image-arrow-up);
+}
+
+.ivds-icon-end--arrow-up {
+  --mask-image-after: var(--mask-image-arrow-up);
+}

package/src/icons/at-sign.scss

@@ -0,0 +1,12 @@
+.ivds-icon--at-sign {
+  --mask-image-at-sign: 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='M11.8769%2020C14.8308%2020%2017.0667%2018.8308%2018.2154%2017.6205L16.3692%2016.5333C15.5487%2017.7436%2013.8872%2018.359%2011.8769%2018.359C8.38974%2018.359%205.86667%2015.7949%205.86667%2011.9795C5.86667%208.24615%208.36923%205.68205%2011.959%205.68205C15.3231%205.68205%2017.7026%208%2017.7026%2011.3436C17.7026%2012.9641%2016.9846%2014.1744%2015.959%2014.1744C15.3026%2014.1744%2014.9744%2013.8051%2014.9744%2013.0256V10.6256C14.9744%208.71795%2013.7231%207.8359%2012.041%207.8359C10.2564%207.8359%209.08718%208.82051%208.49231%209.92821L10.1538%2010.8513C10.3385%2010.0923%2010.9333%209.37436%2011.9795%209.37436C12.5949%209.37436%2013.1487%209.70256%2013.1487%2010.2564C13.1487%2010.7897%2012.4103%2010.9538%2011.3846%2011.159C10.0718%2011.4256%208.67692%2011.9385%208.67692%2013.4974C8.67692%2014.7692%209.80513%2015.6923%2011.1385%2015.6923C12.3282%2015.6923%2013.1487%2015.0154%2013.4769%2014.5846H13.5179C13.9487%2015.3846%2014.8923%2015.6923%2015.8974%2015.6923C17.641%2015.6923%2019.5692%2014.3795%2019.5692%2011.3436C19.5692%207.0359%2016.2667%204%2011.959%204C7.40513%204%204%207.28205%204%2011.9795C4%2016.841%207.42564%2020%2011.8769%2020ZM11.5692%2014.1744C10.9744%2014.1744%2010.5026%2013.8872%2010.5026%2013.3744C10.5026%2012.8%2011.0679%2012.5869%2011.6216%2012.4326L11.8564%2012.3692C12.5128%2012.2051%2013.0256%2012.0615%2013.2103%2011.7949V12.5949C13.2103%2013.6615%2012.3692%2014.1744%2011.5692%2014.1744Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-at-sign);
+}
+
+.ivds-icon-start--at-sign {
+  --mask-image-before: var(--mask-image-at-sign);
+}
+
+.ivds-icon-end--at-sign {
+  --mask-image-after: var(--mask-image-at-sign);
+}

package/src/icons/bag-cogwheel.scss

@@ -0,0 +1,12 @@
+.ivds-icon--bag-cogwheel {
+  --mask-image-bag-cogwheel: 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='M17.9772%203.90476C17.9772%202.95238%2017.9772%202%2011.9995%202C6.02259%202%206.02259%202.95212%206.02259%203.90438C6.02259%204.34759%207.21975%205.75613%208.85629%206.73027C5.23966%208.81779%202.37855%2013.9814%202.03782%2017.2381C1.62734%2021.1615%204.59828%2021.8523%209%2021.974V20.0684C8.64586%2020.0582%208.30432%2020.0441%207.97492%2020.0245C6.78543%2019.9539%205.89026%2019.8184%205.24005%2019.6041C4.61319%2019.3974%204.35502%2019.1653%204.22692%2018.972C4.09478%2018.7725%203.92424%2018.3464%204.02037%2017.4277C4.1933%2015.7748%205.25543%2013.237%206.91439%2011.0989C8.62693%208.89168%2010.4908%207.71429%2011.9994%207.71429C12.9215%207.71429%2013.9764%208.1541%2015.0483%209H17.8764C17.0596%208.10175%2016.1562%207.3251%2015.199%206.76301C16.807%205.84216%2017.9772%204.50064%2017.9772%203.90476ZM14.8859%204.66307C15.1427%204.47216%2015.3653%204.28013%2015.5485%204.10203C15.4444%204.08527%2015.3284%204.06865%2015.1993%204.05265C14.4754%203.96296%2013.4479%203.90476%2011.9995%203.90476C10.5511%203.90476%209.52363%203.96296%208.7999%204.05265C8.71084%204.06368%208.62801%204.07501%208.55106%204.08648C8.72312%204.24874%208.92149%204.41987%209.14194%204.58999C10.1159%205.34161%2011.1705%205.80952%2011.9996%205.80952C12.8765%205.80952%2013.9464%205.3615%2014.8859%204.66307Z'%20fill='black'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.0279%2010.6583C15.3788%209.78057%2016.6212%209.78057%2016.9721%2010.6583C17.2148%2011.2656%2017.9488%2011.5041%2018.5022%2011.1555C19.302%2010.6516%2020.3071%2011.3819%2020.0751%2012.2982C19.9145%2012.9322%2020.3681%2013.5566%2021.0207%2013.5998C21.9639%2013.6623%2022.3479%2014.8439%2021.6215%2015.4488C21.1189%2015.8674%2021.1189%2016.6391%2021.6215%2017.0577C22.3479%2017.6626%2021.9639%2018.8443%2021.0207%2018.9067C20.3681%2018.9499%2019.9145%2019.5743%2020.0751%2020.2083C20.3071%2021.1246%2019.302%2021.8549%2018.5022%2021.351C17.9488%2021.0024%2017.2148%2021.2409%2016.9721%2021.8482C16.6212%2022.7259%2015.3788%2022.7259%2015.0279%2021.8482C14.7852%2021.2409%2014.0512%2021.0024%2013.4978%2021.351C12.698%2021.8549%2011.6929%2021.1246%2011.9249%2020.2083C12.0855%2019.5743%2011.6319%2018.9499%2010.9793%2018.9067C10.0361%2018.8443%209.65214%2017.6626%2010.3785%2017.0577C10.8811%2016.6391%2010.8811%2015.8674%2010.3785%2015.4488C9.65214%2014.8439%2010.0361%2013.6623%2010.9793%2013.5998C11.6319%2013.5566%2012.0855%2012.9322%2011.9249%2012.2982C11.6929%2011.3819%2012.698%2010.6516%2013.4978%2011.1555C14.0512%2011.5041%2014.7852%2011.2656%2015.0279%2010.6583ZM17.973%2016.2264C17.973%2017.3309%2017.0776%2018.2264%2015.973%2018.2264C14.8685%2018.2264%2013.973%2017.3309%2013.973%2016.2264C13.973%2015.1218%2014.8685%2014.2264%2015.973%2014.2264C17.0776%2014.2264%2017.973%2015.1218%2017.973%2016.2264Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-bag-cogwheel);
+}
+
+.ivds-icon-start--bag-cogwheel {
+  --mask-image-before: var(--mask-image-bag-cogwheel);
+}
+
+.ivds-icon-end--bag-cogwheel {
+  --mask-image-after: var(--mask-image-bag-cogwheel);
+}

package/src/icons/bell-crossed.scss

@@ -0,0 +1,12 @@
+.ivds-icon--bell-crossed {
+  --mask-image-bell-crossed: 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='M17.9999%209.534L18%2011L18.0019%2011.2009C18.0186%2012.0272%2018.1492%2012.3644%2018.5515%2012.8551L18.8931%2013.2598C19.6251%2014.1657%2019.9597%2015.0654%2019.9966%2016.6873L20%2017V19H15C15%2020.6569%2013.6569%2022%2012%2022C10.4023%2022%209.09635%2020.7511%209.00511%2019.1763L9.00001%2019H8.53391L10.5339%2017H18L17.998%2016.7558C17.9834%2015.914%2017.888%2015.4219%2017.6647%2015.0002L12.5339%2015L14.5339%2013L16.3136%2013.001C16.1432%2012.5806%2016.0475%2012.112%2016.0139%2011.5219L17.9999%209.534ZM19.7929%202.79289L21.2071%204.20711L4.70712%2020.7071L3.29291%2019.2929L19.7929%202.79289ZM13%2019H11C11%2019.5523%2011.4477%2020%2012%2020C12.5128%2020%2012.9355%2019.614%2012.9933%2019.1166L13%2019ZM12%202C13.7756%202%2015.3711%202.7713%2016.4697%203.99713L15.0517%205.41396C14.318%204.54897%2013.2231%204%2012%204C9.85782%204%208.10894%205.68397%208.00491%207.80036L8.00001%208V11C8.00001%2011.6765%207.93897%2012.2055%207.80365%2012.6646L4.01107%2016.453C4.07419%2014.9768%204.41098%2014.1211%205.10696%2013.2598L5.34226%2012.9814C5.82829%2012.4172%205.98004%2012.0961%205.99811%2011.2009L6.00001%208C6.00001%204.68629%208.68631%202%2012%202Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-bell-crossed);
+}
+
+.ivds-icon-start--bell-crossed {
+  --mask-image-before: var(--mask-image-bell-crossed);
+}
+
+.ivds-icon-end--bell-crossed {
+  --mask-image-after: var(--mask-image-bell-crossed);
+}

package/src/icons/bell.scss

@@ -0,0 +1,12 @@
+.ivds-icon--bell {
+  --mask-image-bell: 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='M18%2017L17.998%2016.7558C17.9834%2015.914%2017.888%2015.4219%2017.6646%2015.0002H6.33536C6.11201%2015.4219%206.01663%2015.914%206.00202%2016.7558L6%2017H18ZM13%2019H11C11%2019.5523%2011.4477%2020%2012%2020C12.5128%2020%2012.9355%2019.614%2012.9933%2019.1166L13%2019ZM12%204C9.8578%204%208.10892%205.68397%208.0049%207.80036L8%208V11C8%2011.8478%207.90415%2012.4638%207.68639%2013.001H16.3136C16.12%2012.5235%2016.0228%2011.9837%2016.0036%2011.2742L16%2011V8C16%205.79086%2014.2091%204%2012%204ZM5.10695%2013.2598L5.34224%2012.9814C5.82828%2012.4172%205.98003%2012.0961%205.9981%2011.2009L6%2011V8C6%204.68629%208.68629%202%2012%202C15.2384%202%2017.8776%204.56557%2017.9959%207.77506L18%208L18.0019%2011.2009C18.0186%2012.0272%2018.1492%2012.3644%2018.5514%2012.8551L18.8931%2013.2598C19.6251%2014.1657%2019.9597%2015.0654%2019.9966%2016.6873L20%2017V19H15C15%2020.6569%2013.6569%2022%2012%2022C10.4023%2022%209.09634%2020.7511%209.00509%2019.1763L9%2019H4V17C4%2015.1778%204.3292%2014.2223%205.10695%2013.2598Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-bell);
+}
+
+.ivds-icon-start--bell {
+  --mask-image-before: var(--mask-image-bell);
+}
+
+.ivds-icon-end--bell {
+  --mask-image-after: var(--mask-image-bell);
+}

package/src/icons/binoculars.scss

@@ -0,0 +1,12 @@
+.ivds-icon--binoculars {
+  --mask-image-binoculars: 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%20d='M21.2722%2011.8678L21.2651%2011.8578C21.2019%2011.7624%2021.1346%2011.6701%2021.0643%2011.5797C21.0643%2011.5797%2016.6752%205.80113%2016.6521%205.77001L16.6491%205.76599C16.2967%205.30017%2015.7436%205%2015.1211%205C14.057%205%2013.1946%205.87642%2013.1946%206.95765L13.1524%208.62918C13.1524%208.70347%2013.0922%208.76371%2013.0179%208.76371H10.9819C10.9077%208.76371%2010.8474%208.70347%2010.8474%208.62918L10.6798%207.01487C10.6798%205.95573%209.82141%205.09838%208.76327%205.09838C8.14385%205.09838%207.5937%205.39253%207.24334%205.84831L2.93651%2011.5797C2.86623%2011.6701%202.79897%2011.7624%202.73572%2011.8578L2.72869%2011.8678C2.25384%2012.5897%201.98278%2013.4581%202.00085%2014.3907C2.04904%2016.764%203.99163%2018.6915%206.3649%2018.7226C8.83556%2018.7547%2010.8474%2016.762%2010.8474%2014.2993V12.2393C10.8474%2012.1238%2010.9408%2012.0305%2011.0562%2012.0305H12.9436C13.0591%2012.0305%2013.1524%2012.1238%2013.1524%2012.2393V14.2431C13.1524%2016.6827%2015.103%2018.7046%2017.5426%2018.7226C20.0012%2018.7407%2022%2016.7529%2022%2014.2993C22%2013.4008%2021.7309%2012.5656%2021.2712%2011.8678H21.2722ZM6.42514%2016.9778C5.01061%2016.9778%203.86413%2015.8313%203.86413%2014.4168C3.86413%2013.0023%205.01061%2011.8558%206.42514%2011.8558C7.83967%2011.8558%208.98615%2013.0023%208.98615%2014.4168C8.98615%2015.8313%207.83967%2016.9778%206.42514%2016.9778ZM17.5767%2016.9818C16.1622%2016.9818%2015.0157%2015.8353%2015.0157%2014.4208C15.0157%2013.0063%2016.1622%2011.8598%2017.5767%2011.8598C18.9912%2011.8598%2020.1377%2013.0063%2020.1377%2014.4208C20.1377%2015.8353%2018.9912%2016.9818%2017.5767%2016.9818Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-binoculars);
+}
+
+.ivds-icon-start--binoculars {
+  --mask-image-before: var(--mask-image-binoculars);
+}
+
+.ivds-icon-end--binoculars {
+  --mask-image-after: var(--mask-image-binoculars);
+}

package/src/icons/box.scss

@@ -0,0 +1,12 @@
+.ivds-icon--box {
+  --mask-image-box: 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='M20%207V21H4V7H20ZM18%209V19H6V9H18Z'%20fill='black'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%203H22V9H2V3ZM4%205V7H20V5H4Z'%20fill='black'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%2011V13H15V11H9Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-box);
+}
+
+.ivds-icon-start--box {
+  --mask-image-before: var(--mask-image-box);
+}
+
+.ivds-icon-end--box {
+  --mask-image-after: var(--mask-image-box);
+}

package/src/icons/cake.scss

@@ -0,0 +1,12 @@
+.ivds-icon--cake {
+  --mask-image-cake: 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='M18%202.18036L18.6171%203.07374C19.7056%204.64959%2020.25%205.73838%2020.25%206.49999C20.25%207.47956%2019.624%208.31292%2018.7503%208.62187L18.7506%2010.0079C20.624%2010.1276%2022%2011.5845%2022%2013.5V22H2V13.5C2%2011.5841%203.3765%2010.127%205.25042%2010.0079L5.25077%208.62223C4.37647%208.31357%203.75%207.47994%203.75%206.49999C3.75%205.78318%204.23223%204.77655%205.19646%203.3468L5.3829%203.07374L6%202.18036L6.6171%203.07374C7.7056%204.64959%208.25%205.73838%208.25%206.49999C8.25%207.47956%207.62402%208.31292%206.75025%208.62187L6.75%209.99936H11.25L11.2508%208.62223C10.4227%208.32988%209.81689%207.56657%209.75519%206.65404L9.75%206.49999C9.75%205.78318%2010.2322%204.77655%2011.1965%203.3468L11.3829%203.07374L12%202.18036L12.6171%203.07374C13.7056%204.64959%2014.25%205.73838%2014.25%206.49999C14.25%207.47956%2013.624%208.31292%2012.7503%208.62187L12.75%209.99936H17.25L17.2508%208.62223C16.4227%208.32988%2015.8169%207.56657%2015.7552%206.65404L15.75%206.49999C15.75%205.78318%2016.2322%204.77655%2017.1965%203.3468L17.3829%203.07374L18%202.18036ZM15.2525%2017.1749L15%2017.025L14.9911%2017.0311C14.1889%2017.5331%2013.2875%2017.808%2012.2991%2017.8538L12%2017.8607C10.9943%2017.8607%2010.0744%2017.6315%209.2525%2017.1749L9%2017.025L8.99113%2017.0311C8.18892%2017.5331%207.28752%2017.808%206.29912%2017.8538L6%2017.8607C5.28909%2017.8607%204.62104%2017.7462%204.00017%2017.5177L4%2020H20L20.0008%2017.5174C19.3797%2017.746%2018.7113%2017.8607%2018%2017.8607C16.9943%2017.8607%2016.0744%2017.6315%2015.2525%2017.1749ZM18.5%2012H5.5C4.5%2012%203.99984%2012.5%203.99984%2013.5V15.8741C4.59297%2016.1992%205.25576%2016.3607%206%2016.3607C6.88939%2016.3607%207.66247%2016.13%208.33935%2015.6652L8.53954%2015.5187L9%2015.1606L9.46046%2015.5187C10.1841%2016.0815%2011.0217%2016.3607%2012%2016.3607C12.8894%2016.3607%2013.6625%2016.13%2014.3393%2015.6652L14.5395%2015.5187L15%2015.1606L15.4605%2015.5187C16.1841%2016.0815%2017.0217%2016.3607%2018%2016.3607C18.7447%2016.3607%2019.4078%2016.199%2020.0012%2015.8735L20%2013.5C20%2012.5%2019.5%2012%2018.5%2012ZM12.1777%205.16381L12%204.86799L11.7715%205.25184L11.5527%205.65496C11.3509%206.05137%2011.25%206.3386%2011.25%206.49999C11.25%206.91421%2011.5858%207.24999%2012%207.24999C12.4142%207.24999%2012.75%206.91421%2012.75%206.49999C12.75%206.35877%2012.6728%206.12121%2012.5182%205.79846L12.4473%205.65496L12.277%205.33744L12.1777%205.16381ZM18.1777%205.16381L18%204.86799L17.7715%205.25184L17.5527%205.65496C17.3509%206.05137%2017.25%206.3386%2017.25%206.49999C17.25%206.91421%2017.5858%207.24999%2018%207.24999C18.4142%207.24999%2018.75%206.91421%2018.75%206.49999C18.75%206.35877%2018.6728%206.12121%2018.5182%205.79846L18.4473%205.65496L18.277%205.33744L18.1777%205.16381ZM6.17766%205.16381L6%204.86799L5.77149%205.25184L5.55271%205.65496C5.35089%206.05137%205.25%206.3386%205.25%206.49999C5.25%206.91421%205.58579%207.24999%206%207.24999C6.41421%207.24999%206.75%206.91421%206.75%206.49999C6.75%206.35877%206.67275%206.12121%206.51824%205.79846L6.44729%205.65496L6.277%205.33744L6.17766%205.16381Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-cake);
+}
+
+.ivds-icon-start--cake {
+  --mask-image-before: var(--mask-image-cake);
+}
+
+.ivds-icon-end--cake {
+  --mask-image-after: var(--mask-image-cake);
+}

package/src/icons/calendar-clock.scss

@@ -0,0 +1,12 @@
+.ivds-icon--calendar-clock {
+  --mask-image-calendar-clock: 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='M17%2012C20.3137%2012%2023%2014.6863%2023%2018C23%2021.3137%2020.3137%2024%2017%2024C13.6863%2024%2011%2021.3137%2011%2018C11%2014.6863%2013.6863%2012%2017%2012ZM17%2014C14.7909%2014%2013%2015.7909%2013%2018C13%2020.2091%2014.7909%2022%2017%2022C19.2091%2022%2021%2020.2091%2021%2018C21%2015.7909%2019.2091%2014%2017%2014ZM17%202C17.5523%202%2018%202.44772%2018%203V4H22L22.0016%2013.1026C21.4273%2012.5162%2020.7507%2012.0304%2020.0007%2011.674L20%2011H4V19L10.071%2019.001C10.1721%2019.7071%2010.3786%2020.3791%2010.674%2021.0007L2%2021V4H6V3C6%202.44772%206.44772%202%207%202C7.55228%202%208%202.44772%208%203V4H16V3C16%202.44772%2016.4477%202%2017%202ZM17.5%2015V17.9395L19.0303%2019.4697L17.9697%2020.5303L16%2018.5607V15H17.5ZM20%206H4V9H20V6Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-calendar-clock);
+}
+
+.ivds-icon-start--calendar-clock {
+  --mask-image-before: var(--mask-image-calendar-clock);
+}
+
+.ivds-icon-end--calendar-clock {
+  --mask-image-after: var(--mask-image-calendar-clock);
+}

package/src/icons/calendar-cross.scss

@@ -0,0 +1,12 @@
+.ivds-icon--calendar-cross {
+  --mask-image-calendar-cross: 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='M17%202C17.5523%202%2018%202.44772%2018%203V4H22V13H20V11H4V19H13.5V21H2V4H6V3C6%202.44772%206.44772%202%207%202C7.55228%202%208%202.44772%208%203V4H16V3C16%202.44772%2016.4477%202%2017%202ZM20%206H4V9H20V6ZM22.5355%2016.4142L20.5%2018.5L22.5%2020.5L21%2022L19%2020L17%2022L15.4645%2020.6569L17.5%2018.5L15.5%2016.5L17%2015L19%2017L21%2015L22.5355%2016.4142Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-calendar-cross);
+}
+
+.ivds-icon-start--calendar-cross {
+  --mask-image-before: var(--mask-image-calendar-cross);
+}
+
+.ivds-icon-end--calendar-cross {
+  --mask-image-after: var(--mask-image-calendar-cross);
+}

package/src/icons/calendar-event.scss

@@ -0,0 +1,12 @@
+.ivds-icon--calendar-event {
+  --mask-image-calendar-event: 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='M15.4554%2022.2312L15.5475%2021.4986L15.8597%2019.0199L14.1757%2017.2064L13.6741%2016.6712L14.3907%2016.5309L16.8118%2016.0736L17.989%2013.8808L18.3371%2013.2312L18.6851%2013.8808L19.8624%2016.0736L22.2834%2016.5309L23%2016.6712L22.4984%2017.2064L20.8093%2019.0251L21.1215%2021.4986L21.2188%2022.2312L20.5585%2021.9143L18.3371%2020.849L16.1156%2021.9143L15.4554%2022.2312ZM17%202C17.5523%202%2018%202.44772%2018%203V4H22V12H20V11H4V19H13V21H2V4H6V3C6%202.44772%206.44772%202%207%202C7.55228%202%208%202.44772%208%203V4H16V3C16%202.44772%2016.4477%202%2017%202ZM20%206H4V9H20V6Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-calendar-event);
+}
+
+.ivds-icon-start--calendar-event {
+  --mask-image-before: var(--mask-image-calendar-event);
+}
+
+.ivds-icon-end--calendar-event {
+  --mask-image-after: var(--mask-image-calendar-event);
+}

package/src/icons/calendar-plus.scss

@@ -0,0 +1,12 @@
+.ivds-icon--calendar-plus {
+  --mask-image-calendar-plus: 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='M20%2014V17H23V19H20V22H18V19H15V17H18V14H20ZM17%202C17.5523%202%2018%202.44772%2018%203V4H22V12H20V11H4V19H13V21H2V4H6V3C6%202.44772%206.44772%202%207%202C7.55228%202%208%202.44772%208%203V4H16V3C16%202.44772%2016.4477%202%2017%202ZM20%206H4V9H20V6Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-calendar-plus);
+}
+
+.ivds-icon-start--calendar-plus {
+  --mask-image-before: var(--mask-image-calendar-plus);
+}
+
+.ivds-icon-end--calendar-plus {
+  --mask-image-after: var(--mask-image-calendar-plus);
+}

package/src/icons/calendar-recurring.scss

@@ -0,0 +1,12 @@
+.ivds-icon--calendar-recurring {
+  --mask-image-calendar-recurring: 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='M16.5%2024L16.2788%2023.9956C13.3438%2023.8795%2011%2021.4635%2011%2018.5C11%2015.5365%2013.3438%2013.1205%2016.2788%2013.0044L16.5%2013L16.7733%2013.0067C18.0431%2013.0694%2019.2336%2013.5684%2020.1999%2014.4417L20.422%2014.653L20.4211%2013H22V18H17V16.4211L19.299%2016.421L19.0724%2016.1266L18.9157%2015.9672C18.2708%2015.3515%2017.4146%2015%2016.5%2015C14.567%2015%2013%2016.567%2013%2018.5C13%2020.433%2014.567%2022%2016.5%2022L16.6059%2021.9984L16.75%2021.9912L16.95%2021.9713L17.1184%2021.9456L17.2213%2021.9256L17.3973%2021.8839L17.585%2021.8286L17.696%2021.7906L17.8733%2021.7206L18.069%2021.6299L18.165%2021.5794L18.3374%2021.4795L18.2261%2021.5459C18.367%2021.4658%2018.5024%2021.3759%2018.6315%2021.2765L18.8061%2021.1329C19.229%2020.7622%2019.5618%2020.2912%2019.7675%2019.7571L21.6348%2020.475C21.3908%2021.1089%2021.0327%2021.6863%2020.5858%2022.1819L20.3891%2022.3891L20.1633%2022.6026L19.9501%2022.7836L19.7949%2022.9043L19.6185%2023.0312L19.4441%2023.1465L19.2063%2023.2892L18.9788%2023.4111L18.7398%2023.5248L18.4975%2023.626L18.3538%2023.6795L18.1096%2023.7607L17.8372%2023.836L17.5226%2023.9049L17.3736%2023.931L17.0542%2023.9723L16.8757%2023.9874L16.7212%2023.9956L16.5%2024ZM17%202C17.5523%202%2018%202.44772%2018%203V4H22V11H4V19H10C10%2019.5%2010.2046%2020.3784%2010.5%2021H2V4H6V3C6%202.44772%206.44772%202%207%202C7.55228%202%208%202.44772%208%203V4H16V3C16%202.44772%2016.4477%202%2017%202ZM20%206H4V9H20V6Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-calendar-recurring);
+}
+
+.ivds-icon-start--calendar-recurring {
+  --mask-image-before: var(--mask-image-calendar-recurring);
+}
+
+.ivds-icon-end--calendar-recurring {
+  --mask-image-after: var(--mask-image-calendar-recurring);
+}