@ivds/core 0.1.1 → 1.0.0

package/src/icons/key.scss

@@ -0,0 +1,12 @@
+.ivds-icon--key {
+  --mask-image-key: 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.1508%201C19.6361%201%2021.6508%203.01472%2021.6508%205.5C21.6508%207.98528%2019.6361%2010%2017.1508%2010C16.2736%2010%2015.4551%209.74902%2014.763%209.31495L7.09%2016.987L9.4046%2019.2393L8.00962%2020.6724L5.675%2018.401L4.831%2019.245L7.65685%2022.0714L6.24264%2023.4856L3.417%2020.66L2%2019.2487L3.41421%2017.8287L5.482%2015.766L5.6546%2015.5892L13.3454%207.90287C12.9055%207.20765%2012.6508%206.38356%2012.6508%205.5C12.6508%203.01472%2014.6655%201%2017.1508%201ZM17.1508%203C15.7701%203%2014.6508%204.11929%2014.6508%205.5C14.6508%206.88071%2015.7701%208%2017.1508%208C18.5315%208%2019.6508%206.88071%2019.6508%205.5C19.6508%204.11929%2018.5315%203%2017.1508%203Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-key);
+}
+
+.ivds-icon-start--key {
+  --mask-image-before: var(--mask-image-key);
+}
+
+.ivds-icon-end--key {
+  --mask-image-after: var(--mask-image-key);
+}

package/src/icons/layers.scss

@@ -0,0 +1,12 @@
+.ivds-icon--layers {
+  --mask-image-layers: 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%2014.5L21%2015.5L12%2020L3%2015.5L5%2014.5L12.0005%2018L19%2014.5ZM19%2011L21%2012L12%2016.5L3%2012L5%2011L12.0005%2014.5L19%2011ZM12%204L21%208.5L12%2013L3%208.5L12%204ZM12.0005%206L7%208.50052L12.0005%2011L17%208.50052L12.0005%206Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-layers);
+}
+
+.ivds-icon-start--layers {
+  --mask-image-before: var(--mask-image-layers);
+}
+
+.ivds-icon-end--layers {
+  --mask-image-after: var(--mask-image-layers);
+}

package/src/icons/lightbulb.scss

@@ -0,0 +1,12 @@
+.ivds-icon--lightbulb {
+  --mask-image-lightbulb: 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='M4%209C4%2011.5264%205.17107%2013.7793%207%2015.2454L8%2016H16L17%2015.2454C18.8289%2013.7793%2020%2011.5264%2020%209C20%204.58172%2016.4183%201%2012%201C7.58172%201%204%204.58172%204%209ZM15.7477%2013.5C17.1207%2012.4425%2018%2010.8958%2018%209C18%205.68629%2015.3137%203%2012%203C8.68629%203%206%205.68629%206%209C6%2010.8958%206.87929%2012.4425%208.2523%2013.5H15.7477Z'%20fill='black'/%3E%3Cpath%20d='M16%2017V19H8V17H16Z'%20fill='black'/%3E%3Cpath%20d='M15.5%2020V22H8.5V20H15.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-lightbulb);
+}
+
+.ivds-icon-start--lightbulb {
+  --mask-image-before: var(--mask-image-lightbulb);
+}
+
+.ivds-icon-end--lightbulb {
+  --mask-image-after: var(--mask-image-lightbulb);
+}

package/src/icons/link-external.scss

@@ -0,0 +1,12 @@
+.ivds-icon--link-external {
+  --mask-image-link-external: 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='M5%203V19H21V21H3V3H5ZM21%203V12H19V6.413L9.91421%2015.5L8.5%2014.0858L17.585%205H12V3H21Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-link-external);
+}
+
+.ivds-icon-start--link-external {
+  --mask-image-before: var(--mask-image-link-external);
+}
+
+.ivds-icon-end--link-external {
+  --mask-image-after: var(--mask-image-link-external);
+}

package/src/icons/link.scss

@@ -0,0 +1,12 @@
+.ivds-icon--link {
+  --mask-image-link: 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.489%206.4205L13.5632%204.36474C14.4164%203.5116%2015.5251%203.03036%2016.6983%203.00138C17.8714%202.9724%2018.9577%203.39942%2019.7697%204.21143C20.5817%205.02344%2021.0277%206.10924%2020.9987%207.28241C20.971%208.40457%2020.5294%209.46775%2019.7445%2010.3047L19.6353%2010.4174L16.2034%2013.8494C15.3502%2014.7025%2014.2415%2015.1837%2013.0684%2015.2127C11.8952%2015.2417%2010.8089%2014.8147%209.99691%2014.0027L10.1969%2013.8079C10.5504%2013.4595%2011.1937%2012.8146%2011.4317%2012.5679C12.2724%2013.4273%2013.7924%2013.4164%2014.7324%2012.5663L14.8188%2012.4842L18.2134%209.03425C19.1635%208.08416%2019.2013%206.55147%2018.297%205.64719C17.4564%204.78776%2015.9363%204.79863%2014.9964%205.64871L14.91%205.73086L12.8547%207.78615L11.489%206.4205ZM4.28786%2013.6217L7.60134%2010.3267C9.28632%208.62321%2012.0229%208.60779%2013.7074%2010.2923L13.1397%2010.8677C12.7975%2011.2113%2012.4306%2011.5756%2012.322%2011.6776C11.4425%2010.7981%209.99793%2010.7794%209.07476%2011.6155L8.98977%2011.6964L5.67618%2015.01C4.75886%2015.9273%204.75036%2017.4352%205.6574%2018.3422C6.53695%2019.2218%207.98149%2019.2405%208.90466%2018.4044L8.98965%2018.3235L10.9742%2016.3204L12.3439%2017.7089L10.3595%2019.6933C9.51702%2020.5357%208.39765%2020.9702%207.29931%2020.9764C6.20098%2020.9826%205.08639%2020.5607%204.25339%2019.7277C2.60123%2018.0938%202.5843%2015.4301%204.19145%2013.7211L4.28786%2013.6217Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-link);
+}
+
+.ivds-icon-start--link {
+  --mask-image-before: var(--mask-image-link);
+}
+
+.ivds-icon-end--link {
+  --mask-image-after: var(--mask-image-link);
+}

package/src/icons/linkedin.scss

@@ -0,0 +1,12 @@
+.ivds-icon--linkedin {
+  --mask-image-linkedin: 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%203H4.92857C3.86384%203%203%203.86384%203%204.92857V19.0714C3%2020.1362%203.86384%2021%204.92857%2021H19.0714C20.1362%2021%2021%2020.1362%2021%2019.0714V4.92857C21%203.86384%2020.1362%203%2019.0714%203ZM5.77232%2018.4286V9.83839H8.4442V18.4286H5.77232ZM5.55937%207.1183C5.55937%206.26652%206.25045%205.57143%207.10625%205.57143C7.95804%205.57143%208.65312%206.26652%208.65312%207.1183C8.65312%207.97411%207.96205%208.66518%207.10625%208.66518C6.25045%208.66518%205.55937%207.97009%205.55937%207.1183ZM15.7728%2018.4286V14.25C15.7728%2013.2536%2015.7527%2011.9719%2014.3866%2011.9719C12.9964%2011.9719%2012.7835%2013.0567%2012.7835%2014.1777V18.4286H10.1156V9.83839H12.675V11.0116H12.7112C13.0688%2010.3366%2013.9406%209.62545%2015.2384%209.62545C17.9384%209.62545%2018.4406%2011.4054%2018.4406%2013.7196V18.4286H15.7728Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-linkedin);
+}
+
+.ivds-icon-start--linkedin {
+  --mask-image-before: var(--mask-image-linkedin);
+}
+
+.ivds-icon-end--linkedin {
+  --mask-image-after: var(--mask-image-linkedin);
+}

package/src/icons/locate.scss

@@ -0,0 +1,12 @@
+.ivds-icon--locate {
+  --mask-image-locate: 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%202L13.001%204.06201C16.6192%204.51365%2019.4869%207.38163%2019.9381%2011L22%2011V13L19.938%2013.001C19.4864%2016.6189%2016.6189%2019.4864%2013.001%2019.938L13%2022H11L11%2019.9381C7.38163%2019.4869%204.51365%2016.6192%204.06201%2013.001L2%2013V11L4.06189%2011C4.51312%207.38129%207.38129%204.51312%2011%204.06189L11%202H13ZM12%206C8.68629%206%206%208.68629%206%2012C6%2015.3137%208.68629%2018%2012%2018C15.3137%2018%2018%2015.3137%2018%2012C18%208.68629%2015.3137%206%2012%206ZM12%208.5C13.933%208.5%2015.5%2010.067%2015.5%2012C15.5%2013.933%2013.933%2015.5%2012%2015.5C10.067%2015.5%208.5%2013.933%208.5%2012C8.5%2010.067%2010.067%208.5%2012%208.5ZM12%2010.5C11.1716%2010.5%2010.5%2011.1716%2010.5%2012C10.5%2012.8284%2011.1716%2013.5%2012%2013.5C12.8284%2013.5%2013.5%2012.8284%2013.5%2012C13.5%2011.1716%2012.8284%2010.5%2012%2010.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-locate);
+}
+
+.ivds-icon-start--locate {
+  --mask-image-before: var(--mask-image-locate);
+}
+
+.ivds-icon-end--locate {
+  --mask-image-after: var(--mask-image-locate);
+}

package/src/icons/location.scss

@@ -0,0 +1,12 @@
+.ivds-icon--location {
+  --mask-image-location: 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.9669%201.5C14.0265%201.5%2016.0869%202.27765%2017.6579%203.83367C20.8001%206.945%2020.5878%2011.7938%2017.6579%2015.1017L17.0345%2015.8107C14.4235%2018.8021%2012.9688%2020.7706%2011.9669%2022.7477C10.8937%2020.6185%209.28527%2018.4993%206.27797%2015.1017C3.34814%2011.7938%203.13508%206.945%206.27797%203.83367C7.84906%202.27765%209.90869%201.5%2011.9669%201.5ZM11.999%203.5C10.3743%203.5%208.84685%204.12598%207.69956%205.26179C6.56645%206.38341%205.97897%207.81769%206.00058%209.41066C6.02151%2010.984%206.64884%2012.5453%207.76709%2013.8087L8.42773%2014.5606C10.0167%2016.3842%2011.1442%2017.8%2012.0004%2019.0644C12.9748%2017.6274%2014.2916%2016.0006%2016.233%2013.8087C17.3512%2012.5453%2017.9786%2010.984%2017.9995%209.41066C18.0198%207.81769%2017.4323%206.38341%2016.3005%205.26179C15.1519%204.12598%2013.6251%203.5%2011.999%203.5ZM12.0004%206C13.9338%206%2015.5%207.56702%2015.5%209.50039C15.5%2011.433%2013.9338%2013%2012.0004%2013C10.067%2013%208.5%2011.433%208.5%209.50039C8.5%207.56702%2010.067%206%2012.0004%206ZM12.0003%208C11.1725%208%2010.5%208.67319%2010.5%209.50034C10.5%2010.3268%2011.1725%2011%2012.0003%2011C12.8275%2011%2013.5%2010.3268%2013.5%209.50034C13.5%208.67319%2012.8275%208%2012.0003%208Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-location);
+}
+
+.ivds-icon-start--location {
+  --mask-image-before: var(--mask-image-location);
+}
+
+.ivds-icon-end--location {
+  --mask-image-after: var(--mask-image-location);
+}

package/src/icons/lock-open.scss

@@ -0,0 +1,12 @@
+.ivds-icon--lock-open {
+  --mask-image-lock-open: 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%202C19.7146%202%2021.924%204.16334%2021.9981%206.86005L22%207V9H20V7C20%205.34315%2018.6569%204%2017%204C15.3808%204%2014.0612%205.28279%2014.0021%206.88753L14%207V9H16V22H2V9H12V7C12%204.23858%2014.2386%202%2017%202ZM14%2011H4V20H14V11ZM10%2013V18H8V13H10Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-lock-open);
+}
+
+.ivds-icon-start--lock-open {
+  --mask-image-before: var(--mask-image-lock-open);
+}
+
+.ivds-icon-end--lock-open {
+  --mask-image-after: var(--mask-image-lock-open);
+}

package/src/icons/lock.scss

@@ -0,0 +1,12 @@
+.ivds-icon--lock {
+  --mask-image-lock: 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%202C14.7146%202%2016.924%204.16334%2016.9981%206.86005L17%207V9H19V22H5V9H7V7C7%204.23858%209.23858%202%2012%202ZM17%2011H7V20H17V11ZM13%2013V18H11V13H13ZM12%204C10.3808%204%209.06121%205.28279%209.00207%206.88753L9%207V9H15V7C15%205.34315%2013.6569%204%2012%204Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-lock);
+}
+
+.ivds-icon-start--lock {
+  --mask-image-before: var(--mask-image-lock);
+}
+
+.ivds-icon-end--lock {
+  --mask-image-after: var(--mask-image-lock);
+}

package/src/icons/map.scss

@@ -0,0 +1,12 @@
+.ivds-icon--map {
+  --mask-image-map: 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='M22%204.11255V17.7207L15%2020.0541L9%2018.054L2%2020.3874V6.77922L9%204.44588L15%206.44547L22%204.11255ZM8%206.88655L4%208.22047V17.612L8%2016.2785V6.88655ZM10%206.88655V16.2785L14%2017.6115V8.22055L10%206.88655ZM20%206.88697L16%208.22055V17.6115L20%2016.279V6.88697Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-map);
+}
+
+.ivds-icon-start--map {
+  --mask-image-before: var(--mask-image-map);
+}
+
+.ivds-icon-end--map {
+  --mask-image-after: var(--mask-image-map);
+}

package/src/icons/menu-dots.scss

@@ -0,0 +1,12 @@
+.ivds-icon--menu-dots {
+  --mask-image-menu-dots: 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%2014C13.1046%2014%2014%2013.1046%2014%2012C14%2010.8954%2013.1046%2010%2012%2010C10.8954%2010%2010%2010.8954%2010%2012C10%2013.1046%2010.8954%2014%2012%2014ZM19%2014C20.1046%2014%2021%2013.1046%2021%2012C21%2010.8954%2020.1046%2010%2019%2010C17.8954%2010%2017%2010.8954%2017%2012C17%2013.1046%2017.8954%2014%2019%2014ZM5%2014C6.10457%2014%207%2013.1046%207%2012C7%2010.8954%206.10457%2010%205%2010C3.89543%2010%203%2010.8954%203%2012C3%2013.1046%203.89543%2014%205%2014Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-menu-dots);
+}
+
+.ivds-icon-start--menu-dots {
+  --mask-image-before: var(--mask-image-menu-dots);
+}
+
+.ivds-icon-end--menu-dots {
+  --mask-image-after: var(--mask-image-menu-dots);
+}

package/src/icons/menu-hamburger.scss

@@ -0,0 +1,12 @@
+.ivds-icon--menu-hamburger {
+  --mask-image-menu-hamburger: 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='M22%2017V19H2V17H22ZM22%2011V13H2V11H22ZM22%205V7H2V5H22Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-menu-hamburger);
+}
+
+.ivds-icon-start--menu-hamburger {
+  --mask-image-before: var(--mask-image-menu-hamburger);
+}
+
+.ivds-icon-end--menu-hamburger {
+  --mask-image-after: var(--mask-image-menu-hamburger);
+}

package/src/icons/microphone-crossed.scss

@@ -0,0 +1,12 @@
+.ivds-icon--microphone-crossed {
+  --mask-image-microphone-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='M19%2011.5C19%2015.0261%2016.3928%2017.9433%2013.001%2018.429L12.9999%2021H16V23H8.00001V21H10.9999L11%2018.4291C10.478%2018.3544%209.97454%2018.2222%209.49633%2018.039L11.1141%2016.4218C11.4016%2016.4732%2011.6977%2016.5%2012%2016.5C14.6888%2016.5%2016.8818%2014.3777%2016.9954%2011.7169L17%2011.5H19ZM19.7929%202.79289L21.2071%204.20711L4.70712%2020.7071L3.29291%2019.2929L19.7929%202.79289ZM7.00001%2011.5C7.00001%2012.0885%207.10169%2012.6533%207.28843%2013.1777L5.76994%2014.6948C5.31222%2013.804%205.03994%2012.8023%205.00407%2011.7407L5.00001%2011.5H7.00001ZM12%201C13.6569%201%2015%202.34315%2015%204V5.463L8.99997%2011.464V4C8.99997%202.34315%2010.3432%201%2012%201Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-microphone-crossed);
+}
+
+.ivds-icon-start--microphone-crossed {
+  --mask-image-before: var(--mask-image-microphone-crossed);
+}
+
+.ivds-icon-end--microphone-crossed {
+  --mask-image-after: var(--mask-image-microphone-crossed);
+}

package/src/icons/microphone.scss

@@ -0,0 +1,12 @@
+.ivds-icon--microphone {
+  --mask-image-microphone: 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='M7%2011.5C7%2014.2614%209.23858%2016.5%2012%2016.5C14.6888%2016.5%2016.8818%2014.3777%2016.9954%2011.7169L17%2011.5H19C19%2015.0261%2016.3928%2017.9433%2013.001%2018.429L13%2021H16V23H8V21H11V18.4291C7.68518%2017.955%205.11952%2015.1585%205.00406%2011.7407L5%2011.5H7ZM12%201C13.6569%201%2015%202.34315%2015%204V11.5C15%2013.1569%2013.6569%2014.5%2012%2014.5C10.3431%2014.5%209%2013.1569%209%2011.5V4C9%202.34315%2010.3431%201%2012%201Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-microphone);
+}
+
+.ivds-icon-start--microphone {
+  --mask-image-before: var(--mask-image-microphone);
+}
+
+.ivds-icon-end--microphone {
+  --mask-image-after: var(--mask-image-microphone);
+}

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

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

package/src/icons/minus-circle.scss

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

package/src/icons/minus.scss

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

package/src/icons/mobile.scss

@@ -0,0 +1,12 @@
+.ivds-icon--mobile {
+  --mask-image-mobile: 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%202C17.1422%202%2018.8911%203.68397%2018.9951%205.80036L19%206V18C19%2020.1422%2017.316%2021.8911%2015.1996%2021.9951L15%2022H9C6.8578%2022%205.10892%2020.316%205.0049%2018.1996L5%2018V6C5%203.8578%206.68397%202.10892%208.80036%202.0049L9%202H15ZM15%204H9C7.94564%204%207.08183%204.81588%207.00549%205.85074L7%206V18C7%2019.0544%207.81588%2019.9182%208.85074%2019.9945L9%2020H15C16.0544%2020%2016.9182%2019.1841%2016.9945%2018.1493L17%2018V6C17%204.94564%2016.1841%204.08183%2015.1493%204.00549L15%204ZM12%2015.5C12.8284%2015.5%2013.5%2016.1716%2013.5%2017C13.5%2017.8284%2012.8284%2018.5%2012%2018.5C11.1716%2018.5%2010.5%2017.8284%2010.5%2017C10.5%2016.1716%2011.1716%2015.5%2012%2015.5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-mobile);
+}
+
+.ivds-icon-start--mobile {
+  --mask-image-before: var(--mask-image-mobile);
+}
+
+.ivds-icon-end--mobile {
+  --mask-image-after: var(--mask-image-mobile);
+}

package/src/icons/money-bag-fill.scss

@@ -0,0 +1,12 @@
+.ivds-icon--money-bag-fill {
+  --mask-image-money-bag-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='M17.9772%203.90476C17.9772%202.95238%2017.9772%202%2011.9995%202C6.02259%202%206.02259%202.95251%206.02259%203.90476C6.02259%204.34797%207.21975%205.75613%208.85629%206.73027C5.23966%208.81779%202.37855%2013.9814%202.03782%2017.2381C1.5396%2022%206.0227%2022%2011.9993%2022C17.976%2022%2022.4603%2022%2021.9622%2017.2381C21.6233%2013.9983%2018.7893%208.87132%2015.199%206.76301C16.807%205.84216%2017.9772%204.50064%2017.9772%203.90476ZM12.464%2014.716L12.116%2015.856H10.712C10.916%2016.66%2011.336%2017.2%2012.212%2017.2C13.184%2017.2%2013.52%2016.336%2013.532%2015.352L15.116%2016.348C14.744%2017.56%2013.784%2018.592%2012.212%2018.592C10.64%2018.592%209.452%2017.68%209.032%2015.856H8V14.716H8.888C8.876%2014.584%208.876%2014.44%208.876%2014.284V14.02H8V12.88H9.02C9.44%2010.984%2010.712%2010%2012.212%2010C13.724%2010%2014.744%2010.96%2015.116%2012.184L13.532%2013.168C13.532%2012.184%2013.16%2011.392%2012.212%2011.392C11.384%2011.392%2010.928%2012.016%2010.712%2012.88H12.98L12.644%2014.02H10.568V14.716H12.464Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-money-bag-fill);
+}
+
+.ivds-icon-start--money-bag-fill {
+  --mask-image-before: var(--mask-image-money-bag-fill);
+}
+
+.ivds-icon-end--money-bag-fill {
+  --mask-image-after: var(--mask-image-money-bag-fill);
+}

package/src/icons/money-bag.scss

@@ -0,0 +1,12 @@
+.ivds-icon--money-bag {
+  --mask-image-money-bag: 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='M12.464%2014.716L12.116%2015.856H10.712C10.916%2016.66%2011.336%2017.2%2012.212%2017.2C13.184%2017.2%2013.52%2016.336%2013.532%2015.352L15.116%2016.348C14.744%2017.56%2013.784%2018.592%2012.212%2018.592C10.64%2018.592%209.452%2017.68%209.032%2015.856H8V14.716H8.888C8.876%2014.584%208.876%2014.44%208.876%2014.284V14.02H8V12.88H9.02C9.44%2010.984%2010.712%2010%2012.212%2010C13.724%2010%2014.744%2010.96%2015.116%2012.184L13.532%2013.168C13.532%2012.184%2013.16%2011.392%2012.212%2011.392C11.384%2011.392%2010.928%2012.016%2010.712%2012.88H12.98L12.644%2014.02H10.568V14.716H12.464Z'%20fill='black'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.9995%202C17.9772%202%2017.9772%202.95238%2017.9772%203.90476C17.9772%204.50064%2016.807%205.84216%2015.199%206.76301C18.7893%208.87132%2021.6233%2013.9983%2021.9622%2017.2381C22.4603%2022%2017.976%2022%2011.9993%2022C6.0227%2022%201.5396%2022%202.03782%2017.2381C2.37855%2013.9814%205.23966%208.81779%208.85629%206.73027C7.21975%205.75613%206.02259%204.34759%206.02259%203.90438C6.02259%202.95212%206.02259%202%2011.9995%202ZM15.5485%204.10203C15.3653%204.28013%2015.1427%204.47216%2014.8859%204.66307C13.9464%205.3615%2012.8765%205.80952%2011.9996%205.80952C11.1705%205.80952%2010.1159%205.34161%209.14194%204.58999C8.92149%204.41987%208.72312%204.24874%208.55106%204.08648C8.62801%204.07501%208.71084%204.06368%208.7999%204.05265C9.52363%203.96296%2010.5511%203.90476%2011.9995%203.90476C13.4479%203.90476%2014.4754%203.96296%2015.1993%204.05265C15.3284%204.06865%2015.4444%204.08527%2015.5485%204.10203ZM19.773%2018.9717C19.9052%2018.7723%2020.0757%2018.3462%2019.9797%2017.4276C19.8068%2015.7749%2018.7445%2013.2372%2017.0852%2011.099C15.3724%208.89178%2013.5082%207.71429%2011.9994%207.71429C10.4908%207.71429%208.62693%208.89168%206.91439%2011.0989C5.25543%2013.237%204.1933%2015.7748%204.02037%2017.4277C3.92424%2018.3464%204.09478%2018.7725%204.22692%2018.972C4.35502%2019.1653%204.61319%2019.3974%205.24005%2019.6041C5.89026%2019.8184%206.78543%2019.9539%207.97492%2020.0245C9.15403%2020.0945%2010.4889%2020.0952%2011.9993%2020.0952C13.5098%2020.0952%2014.8447%2020.0945%2016.024%2020.0245C17.2136%2019.9539%2018.1089%2019.8184%2018.7594%2019.604C19.3865%2019.3973%2019.6448%2019.1652%2019.773%2018.9717Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-money-bag);
+}
+
+.ivds-icon-start--money-bag {
+  --mask-image-before: var(--mask-image-money-bag);
+}
+
+.ivds-icon-end--money-bag {
+  --mask-image-after: var(--mask-image-money-bag);
+}

package/src/icons/mover.scss

@@ -0,0 +1,12 @@
+.ivds-icon--mover {
+  --mask-image-mover: 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='M5%204C5.27614%204%205.5%203.77614%205.5%203.5C5.5%203.22386%205.27614%203%205%203C4.72386%203%204.5%203.22386%204.5%203.5C4.5%203.77614%204.72386%204%205%204ZM5%206C6.38071%206%207.5%204.88071%207.5%203.5C7.5%202.11929%206.38071%201%205%201C3.61929%201%202.5%202.11929%202.5%203.5C2.5%204.88071%203.61929%206%205%206ZM4%2016V22H6V16H8V24H2V16H4ZM7%207C8.65685%207%2010%208.34315%2010%2010V16H8V10C8%209.44772%207.55228%209%207%209H3C2.44772%209%202%209.44772%202%2010V16H0V10C0%208.34315%201.34315%207%203%207H7ZM24%2024C23.6483%2024%2023.3067%2023.9851%2022.9692%2023.9563L22.8661%2023.9557L22.8533%2023.9459C19.6797%2023.645%2016.8663%2022.1082%2014.8995%2019.8221L14.5891%2019.4462L14.4089%2019.213L14.1711%2018.886C14.0346%2018.6916%2013.9037%2018.4928%2013.7787%2018.29L13.7128%2018.1819C12.6254%2016.3764%2012%2014.2612%2012%2012C12%209.99115%2012.4936%208.0976%2013.3662%206.434L13.5435%206.10841C13.6201%205.97273%2013.6993%205.83868%2013.7809%205.70634L13.9901%205.37936L14.2048%205.06621L14.4563%204.72453L14.6838%204.43584C16.8848%201.72883%2020.2405%200%2024%200V24ZM22.4999%2017.5503C21.7436%2017.6013%2020.9977%2017.6904%2020.2643%2017.8159C20.8413%2018.9913%2021.5986%2020.061%2022.5002%2020.9901L22.4999%2017.5503ZM18.2615%2018.2584L18.1241%2018.2935C17.6108%2018.4354%2017.1051%2018.5954%2016.6077%2018.7728C17.4818%2019.6756%2018.5514%2020.385%2019.7799%2020.8618C19.1874%2020.0541%2018.6771%2019.1822%2018.2615%2018.2584ZM17.0142%2013.0007L14.0494%2013C14.2019%2014.5358%2014.649%2015.9218%2015.3454%2017.1092C16.0697%2016.8277%2016.8113%2016.5816%2017.5679%2016.3717C17.2553%2015.2945%2017.0655%2014.1656%2017.0142%2013.0007ZM22.5%2013L19.0165%2013.0007C19.0682%2014.0099%2019.2406%2014.9873%2019.5195%2015.9186C20.4932%2015.7336%2021.4882%2015.6085%2022.5002%2015.5461L22.5%2013ZM15.3341%206.88774L15.2261%207.0793C14.5978%208.23146%2014.193%209.55375%2014.0494%2011L17.0629%2011.0007C17.1703%209.85024%2017.413%208.73911%2017.7749%207.68336C17.1506%207.5172%2016.5364%207.32574%2015.9333%207.11065L15.3341%206.88774ZM19.7409%208.12322L19.7366%208.13569C19.4072%209.04578%2019.1814%2010.0054%2019.0732%2011.0004L22.5%2011L22.5002%208.4539C21.5649%208.39623%2020.6441%208.28499%2019.7409%208.12322ZM20.7835%205.94505L20.61%206.24042C21.2318%206.33658%2021.8621%206.40671%2022.4999%206.44966L22.5002%203.72125C21.9566%204.28139%2021.4655%204.89268%2021.0347%205.54721L20.7835%205.94505ZM20.6695%202.75257L20.5689%202.78073C18.9899%203.25097%2017.6365%204.08935%2016.5751%205.21494C17.2252%205.44857%2017.889%205.65174%2018.5653%205.82359C19.1329%204.707%2019.8424%203.67609%2020.6695%202.75257Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-mover);
+}
+
+.ivds-icon-start--mover {
+  --mask-image-before: var(--mask-image-mover);
+}
+
+.ivds-icon-end--mover {
+  --mask-image-after: var(--mask-image-mover);
+}

package/src/icons/occupation.scss

@@ -0,0 +1,12 @@
+.ivds-icon--occupation {
+  --mask-image-occupation: 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%202C6%200.89543%206.89543%200%208%200H16C17.1046%200%2018%200.89543%2018%202V4H16V2H8V4H6V2ZM22%204C23.1046%204%2024%204.89543%2024%206V22C24%2023.1046%2023.1046%2024%2022%2024H2C0.895429%2024%200%2023.1046%200%2022V6C0%204.89543%200.89543%204%202%204H22ZM22%2012.427L12.6835%2015.8155C12.242%2015.9761%2011.7581%2015.9761%2011.3166%2015.8155L2%2012.428V22H22V12.427ZM22%206H2V10.2996L12%2013.9359L22%2010.2996V6ZM12%2010C12.5523%2010%2013%2010.4477%2013%2011C13%2011.5523%2012.5523%2012%2012%2012C11.4477%2012%2011%2011.5523%2011%2011C11%2010.4477%2011.4477%2010%2012%2010Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-occupation);
+}
+
+.ivds-icon-start--occupation {
+  --mask-image-before: var(--mask-image-occupation);
+}
+
+.ivds-icon-end--occupation {
+  --mask-image-after: var(--mask-image-occupation);
+}

package/src/icons/paperclip.scss

@@ -0,0 +1,12 @@
+.ivds-icon--paperclip {
+  --mask-image-paperclip: 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%207H18V16C18%2019.3137%2015.3137%2022%2012%2022C8.7616%2022%206.12243%2019.4344%206.00414%2016.2249L6%2016V6.5C6%204.01472%208.01472%202%2010.5%202C12.9143%202%2014.8845%203.90124%2014.9951%206.28816L15%206.5V15C15%2016.6569%2013.6569%2018%2012%2018C10.4023%2018%209.09634%2016.7511%209.00509%2015.1763L9%2015V7H11V15C11%2015.5523%2011.4477%2016%2012%2016C12.5128%2016%2012.9355%2015.614%2012.9933%2015.1166L13%2015V6.5C13%205.11929%2011.8807%204%2010.5%204C9.17452%204%208.08996%205.03154%208.00532%206.33562L8%206.5V16C8%2018.2091%209.79086%2020%2012%2020C14.1422%2020%2015.8911%2018.316%2015.9951%2016.1996L16%2016V7Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-paperclip);
+}
+
+.ivds-icon-start--paperclip {
+  --mask-image-before: var(--mask-image-paperclip);
+}
+
+.ivds-icon-end--paperclip {
+  --mask-image-after: var(--mask-image-paperclip);
+}

package/src/icons/pen-line.scss

@@ -0,0 +1,12 @@
+.ivds-icon--pen-line {
+  --mask-image-pen-line: 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.25%202.5L3.5%2013.25L3.5143%2017.9857L8.25%2018L19%207.25L14.25%202.5ZM5.5%2014L14.25%205.25L16.25%207.25L7.5%2016L5.50696%2015.994L5.5%2014ZM3.5%2020H20.5V22H3.5V20Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-pen-line);
+}
+
+.ivds-icon-start--pen-line {
+  --mask-image-before: var(--mask-image-pen-line);
+}
+
+.ivds-icon-end--pen-line {
+  --mask-image-after: var(--mask-image-pen-line);
+}

package/src/icons/pen.scss

@@ -0,0 +1,12 @@
+.ivds-icon--pen {
+  --mask-image-pen: 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.75%203L4.5%2015.25L4.5143%2019.9857L9.25%2020L21.5%207.75L16.75%203ZM6.5%2016L16.75%205.75L18.75%207.75L8.5%2018L6.50696%2017.994L6.5%2016Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-pen);
+}
+
+.ivds-icon-start--pen {
+  --mask-image-before: var(--mask-image-pen);
+}
+
+.ivds-icon-end--pen {
+  --mask-image-after: var(--mask-image-pen);
+}

package/src/icons/person-female.scss

@@ -0,0 +1,12 @@
+.ivds-icon--person-female {
+  --mask-image-person-female: 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%2018V22H13V18H15V24H9V18H11ZM13.0476%207C14.9713%207%2016.1733%208.17451%2016.6362%2010.0048L18.4695%2017.2548L16.5305%2017.7452L14.6972%2010.4952C14.45%209.51758%2013.9877%209.0376%2013.15%209.00213L13.0476%209H10.9524C10.0496%209%209.55991%209.47847%209.30282%2010.4952L7.46948%2017.7452L5.53052%2017.2548L7.36385%2010.0048C7.81512%208.22027%208.96906%207.05914%2010.8095%207.00219L10.9524%207H13.0476ZM12%200C13.6569%200%2015%201.34315%2015%203C15%204.65685%2013.6569%206%2012%206C10.3431%206%209%204.65685%209%203C9%201.34315%2010.3431%200%2012%200ZM12%202C11.4477%202%2011%202.44772%2011%203C11%203.55228%2011.4477%204%2012%204C12.5523%204%2013%203.55228%2013%203C13%202.44772%2012.5523%202%2012%202Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-person-female);
+}
+
+.ivds-icon-start--person-female {
+  --mask-image-before: var(--mask-image-person-female);
+}
+
+.ivds-icon-end--person-female {
+  --mask-image-after: var(--mask-image-person-female);
+}

package/src/icons/person-genderless.scss

@@ -0,0 +1,12 @@
+.ivds-icon--person-genderless {
+  --mask-image-person-genderless: 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%2017V22H13V17H15V24H9V17H11ZM16.5%209L17%2017H15L14.7167%2010.4952C14.4695%209.51758%2014.0073%209.0376%2013.1695%209.00213L10.9719%209C10.0691%209%209.57944%209.47848%209.32235%2010.4952L9%2017H7L7.5%209C7.95127%207.21543%208.98859%207.05914%2010.829%207.00219L10.9719%207H13.0672C14.9908%207%2016.0372%207.16967%2016.5%209ZM12.0195%200C13.6764%200%2015.0195%201.34315%2015.0195%203C15.0195%204.59768%2013.7706%205.90366%2012.1958%205.99491L12%206C10.3432%206%209.00005%204.65685%209.00005%203C9.00005%201.40232%2010.249%200.0963394%2011.8237%200.00509271L12.0195%200ZM12.0092%202.00004L12.0195%202C11.4672%202%2011.0195%202.44772%2011.0195%203C11.0195%203.54891%2011.4618%203.99453%2012.0094%203.99995C12.5523%204%2013%203.55228%2013%203C13%202.45078%2012.5572%202.00497%2012.0092%202.00004Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-person-genderless);
+}
+
+.ivds-icon-start--person-genderless {
+  --mask-image-before: var(--mask-image-person-genderless);
+}
+
+.ivds-icon-end--person-genderless {
+  --mask-image-after: var(--mask-image-person-genderless);
+}

package/src/icons/person-male.scss

@@ -0,0 +1,12 @@
+.ivds-icon--person-male {
+  --mask-image-person-male: 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%2016V22H13V16H15V24H9V16H11ZM14.5%207C16.3927%207%2017.9345%208.50239%2017.998%2010.3797L18%2010.5V16H16V10.5C16%209.70116%2015.3755%209.04817%2014.5881%209.00255L14.5%209H9.5C8.70116%209%208.04817%209.62446%208.00255%2010.4119L8%2010.5V16H6V10.5C6%208.60727%207.50239%207.06545%209.37967%207.00203L9.5%207H14.5ZM12%200C13.6569%200%2015%201.34315%2015%203C15%204.65685%2013.6569%206%2012%206C10.3431%206%209%204.65685%209%203C9%201.34315%2010.3431%200%2012%200ZM12%202C11.4477%202%2011%202.44772%2011%203C11%203.55228%2011.4477%204%2012%204C12.5523%204%2013%203.55228%2013%203C13%202.44772%2012.5523%202%2012%202Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-person-male);
+}
+
+.ivds-icon-start--person-male {
+  --mask-image-before: var(--mask-image-person-male);
+}
+
+.ivds-icon-end--person-male {
+  --mask-image-after: var(--mask-image-person-male);
+}

package/src/icons/person-wheelchair.scss

@@ -0,0 +1,12 @@
+.ivds-icon--person-wheelchair {
+  --mask-image-person-wheelchair: 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='M7.99937%209.49841L7.99958%2011.7576C7.759%2011.9187%207.53053%2012.1055%207.31802%2012.318C5.56066%2014.0754%205.56066%2016.9246%207.31802%2018.682C9.044%2020.408%2011.8232%2020.4388%2013.5868%2018.7744L13.682%2018.682L15.0962%2020.0962C12.5578%2022.6346%208.44221%2022.6346%205.90381%2020.0962C3.3654%2017.5578%203.3654%2013.4422%205.90381%2010.9038C6.52361%2010.284%207.23743%209.81554%207.99937%209.49841ZM11%201C12.6569%201%2014%202.34315%2014%204C14%205.30625%2013.1651%206.41751%2011.9999%206.82933L11.999%209H16V11H11.999L12%2011.7912C12.0005%2012.3185%2012.2054%2012.8233%2012.5858%2013.2036C13.1271%2013.745%2013.5156%2013.8925%2014.4669%2013.9563L14.7547%2013.9725C16.3725%2014.0496%2017.2151%2014.2974%2018.2426%2015.325C19.1739%2016.2563%2019.4647%2017.0357%2019.5684%2018.3779L19.5951%2018.8129C19.6482%2019.9287%2019.7607%2020.3519%2020.2893%2020.9054L20.364%2020.9818L18.9497%2022.396C17.9603%2021.4065%2017.6938%2020.5885%2017.6066%2019.0847L17.5973%2018.9081C17.5418%2017.7416%2017.4213%2017.3321%2016.8284%2016.7392C16.2613%2016.1721%2015.8619%2016.0372%2014.8075%2015.9779L14.6595%2015.9703C13.0418%2015.8932%2012.1991%2015.6454%2011.1716%2014.6179C10.4489%2013.8951%2010.0409%2012.9409%2010.0029%2011.943L9.9991%206.82898C8.83438%206.41688%208%205.30588%208%204C8%202.34315%209.34315%201%2011%201ZM11%203C10.4477%203%2010%203.44772%2010%204C10%204.55228%2010.4477%205%2011%205C11.5523%205%2012%204.55228%2012%204C12%203.44772%2011.5523%203%2011%203Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-person-wheelchair);
+}
+
+.ivds-icon-start--person-wheelchair {
+  --mask-image-before: var(--mask-image-person-wheelchair);
+}
+
+.ivds-icon-end--person-wheelchair {
+  --mask-image-after: var(--mask-image-person-wheelchair);
+}

package/src/icons/phone.scss

@@ -0,0 +1,12 @@
+.ivds-icon--phone {
+  --mask-image-phone: 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='M4.88475%202.50597L3.04274%204.34798L3.00927%204.38311C0.572022%207.06914%202.78398%2012.4521%207.19058%2016.8176C11.6361%2021.2216%2016.9423%2023.4177%2019.6169%2020.9908L21.4941%2019.1153C22.1719%2018.4375%2022.1491%2017.5519%2021.5517%2016.8429L21.4941%2016.7801L17.3496%2012.6356C16.6717%2011.9577%2015.7862%2011.9805%2015.0771%2012.5779L15.0143%2012.6356L13.968%2013.6815L13.9315%2013.6736C13.3458%2013.53%2012.6896%2013.0718%2011.8082%2012.1904L11.6852%2012.066C10.8843%2011.2471%2010.4629%2010.6263%2010.3263%2010.0686L10.318%2010.0315L11.3645%208.98572L11.4221%208.92294C12.0195%208.21389%2012.0424%207.32836%2011.3645%206.6505L7.21997%202.50597L7.15719%202.44833C6.44814%201.85093%205.56261%201.82812%204.88475%202.50597ZM6.05202%204.16653L9.70352%207.81803L8.27588%209.24591V9.66012C8.27588%2011.015%208.96256%2012.1732%2010.394%2013.6046C11.8259%2015.0365%2012.9851%2015.7242%2014.3399%2015.7242H14.7541L16.182%2014.2965L19.833%2017.9475L18.2379%2019.5431C16.7133%2020.9249%2012.3595%2019.1231%208.59815%2015.3968L8.44621%2015.2448C4.87572%2011.6383%203.13151%207.398%204.43358%205.7933L4.48102%205.73753L6.05202%204.16653Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-phone);
+}
+
+.ivds-icon-start--phone {
+  --mask-image-before: var(--mask-image-phone);
+}
+
+.ivds-icon-end--phone {
+  --mask-image-after: var(--mask-image-phone);
+}

package/src/icons/photo-plus.scss

@@ -0,0 +1,12 @@
+.ivds-icon--photo-plus {
+  --mask-image-photo-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='M12%202V4H6L6.00114%2013.4397C6.50287%2013.6831%206.92886%2014.0298%207.51078%2014.5986L7.70711%2014.7929C8.6613%2015.7471%209.08282%2016%2010%2016C10.8599%2016%2011.2841%2015.7777%2012.12%2014.9637L12.2929%2014.7929C13.5887%2013.4971%2014.4172%2013%2016%2013C16.8098%2013%2017.4222%2013.1301%2018.0007%2013.4308L18%2011H20V22H4V2H12ZM16%2015C15.1401%2015%2014.7159%2015.2223%2013.88%2016.0363L13.7071%2016.2071C12.4113%2017.5029%2011.5828%2018%2010%2018C8.50049%2018%207.67799%2017.5539%206.49379%2016.4051L6%2015.92V20H18V15.922L17.958%2015.8813C17.2256%2015.1936%2016.8025%2015%2016%2015ZM10%206C11.6569%206%2013%207.34315%2013%209C13%2010.6569%2011.6569%2012%2010%2012C8.34315%2012%207%2010.6569%207%209C7%207.34315%208.34315%206%2010%206ZM10%208C9.44772%208%209%208.44772%209%209C9%209.55229%209.44772%2010%2010%2010C10.5523%2010%2011%209.55229%2011%209C11%208.44772%2010.5523%208%2010%208ZM19%201V4H22V6H19V9H17V6H14V4H17V1H19Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-photo-plus);
+}
+
+.ivds-icon-start--photo-plus {
+  --mask-image-before: var(--mask-image-photo-plus);
+}
+
+.ivds-icon-end--photo-plus {
+  --mask-image-after: var(--mask-image-photo-plus);
+}

package/src/icons/photo.scss

@@ -0,0 +1,12 @@
+.ivds-icon--photo {
+  --mask-image-photo: 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%202V22H4V2H20ZM16%2015C15.1401%2015%2014.7159%2015.2223%2013.88%2016.0363L13.7071%2016.2071C12.4113%2017.5029%2011.5828%2018%2010%2018C8.50049%2018%207.67799%2017.5539%206.49379%2016.4051L6%2015.92V20H18V15.922L17.958%2015.8813C17.2256%2015.1936%2016.8025%2015%2016%2015ZM18%204H6L6.00114%2013.4397C6.50287%2013.6831%206.92886%2014.0298%207.51078%2014.5986L7.70711%2014.7929C8.6613%2015.7471%209.08282%2016%2010%2016C10.8599%2016%2011.2841%2015.7777%2012.12%2014.9637L12.2929%2014.7929C13.5887%2013.4971%2014.4172%2013%2016%2013C16.8098%2013%2017.4222%2013.1301%2018.0007%2013.4308L18%204ZM10%206C11.6569%206%2013%207.34315%2013%209C13%2010.6569%2011.6569%2012%2010%2012C8.34315%2012%207%2010.6569%207%209C7%207.34315%208.34315%206%2010%206ZM10%208C9.44772%208%209%208.44772%209%209C9%209.55228%209.44772%2010%2010%2010C10.5523%2010%2011%209.55228%2011%209C11%208.44772%2010.5523%208%2010%208Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-photo);
+}
+
+.ivds-icon-start--photo {
+  --mask-image-before: var(--mask-image-photo);
+}
+
+.ivds-icon-end--photo {
+  --mask-image-after: var(--mask-image-photo);
+}

package/src/icons/playback-fastforward.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-fastforward {
+  --mask-image-playback-fastforward: 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='M5%205L13%2012L5%2019V5ZM13%205L21%2012L13%2019V5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-fastforward);
+}
+
+.ivds-icon-start--playback-fastforward {
+  --mask-image-before: var(--mask-image-playback-fastforward);
+}
+
+.ivds-icon-end--playback-fastforward {
+  --mask-image-after: var(--mask-image-playback-fastforward);
+}

package/src/icons/playback-next.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-next {
+  --mask-image-playback-next: 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%204V20H17V4H19ZM5%205L17%2012L5%2019V5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-next);
+}
+
+.ivds-icon-start--playback-next {
+  --mask-image-before: var(--mask-image-playback-next);
+}
+
+.ivds-icon-end--playback-next {
+  --mask-image-after: var(--mask-image-playback-next);
+}

package/src/icons/playback-pause.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-pause {
+  --mask-image-playback-pause: 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%205V19H14V5H17ZM10%205V19H7V5H10Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-pause);
+}
+
+.ivds-icon-start--playback-pause {
+  --mask-image-before: var(--mask-image-playback-pause);
+}
+
+.ivds-icon-end--playback-pause {
+  --mask-image-after: var(--mask-image-playback-pause);
+}

package/src/icons/playback-play.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-play {
+  --mask-image-playback-play: 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='M7%205L19%2012L7%2019V5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-play);
+}
+
+.ivds-icon-start--playback-play {
+  --mask-image-before: var(--mask-image-playback-play);
+}
+
+.ivds-icon-end--playback-play {
+  --mask-image-after: var(--mask-image-playback-play);
+}

package/src/icons/playback-previous.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-previous {
+  --mask-image-playback-previous: 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='M5%204V20H7V4H5ZM19%205L7%2012L19%2019V5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-previous);
+}
+
+.ivds-icon-start--playback-previous {
+  --mask-image-before: var(--mask-image-playback-previous);
+}
+
+.ivds-icon-end--playback-previous {
+  --mask-image-after: var(--mask-image-playback-previous);
+}

package/src/icons/playback-record.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-record {
+  --mask-image-playback-record: 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='M12%2018C15.3137%2018%2018%2015.3137%2018%2012C18%208.68629%2015.3137%206%2012%206C8.68629%206%206%208.68629%206%2012C6%2015.3137%208.68629%2018%2012%2018Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-record);
+}
+
+.ivds-icon-start--playback-record {
+  --mask-image-before: var(--mask-image-playback-record);
+}
+
+.ivds-icon-end--playback-record {
+  --mask-image-after: var(--mask-image-playback-record);
+}

package/src/icons/playback-rewind.scss

@@ -0,0 +1,12 @@
+.ivds-icon--playback-rewind {
+  --mask-image-playback-rewind: 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%205L11%2012L19%2019V5ZM11%205L3%2012L11%2019V5Z'%20fill='black'/%3E%3C/svg%3E");
+  --mask-image: var(--mask-image-playback-rewind);
+}
+
+.ivds-icon-start--playback-rewind {
+  --mask-image-before: var(--mask-image-playback-rewind);
+}
+
+.ivds-icon-end--playback-rewind {
+  --mask-image-after: var(--mask-image-playback-rewind);
+}

package/src/icons/playback-stop.scss

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