diff --git a/react/Accordion/index.jsx b/react/Accordion/index.jsx
index c5b32daeb2..bd5fb51b45 100644
--- a/react/Accordion/index.jsx
+++ b/react/Accordion/index.jsx
@@ -5,6 +5,8 @@ import cx from 'classnames'
 import Icon from '../Icon'
 import styles from './styles.styl'
 
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 class AccordionItem extends Component {
   constructor(props) {
     super(props)
@@ -40,7 +42,7 @@ class AccordionItem extends Component {
             aria-expanded={selected}
             aria-controls={contentID}
           >
-            <Icon icon="right" />
+            <Icon icon={RightIcon} />
             {label}
           </div>
         </div>
diff --git a/react/AppSections/components/DropdownFilter.jsx b/react/AppSections/components/DropdownFilter.jsx
index 76f108e2a1..96a3053439 100644
--- a/react/AppSections/components/DropdownFilter.jsx
+++ b/react/AppSections/components/DropdownFilter.jsx
@@ -6,10 +6,12 @@ import PropTypes from 'prop-types'
 import styles from './DropdownFilter.styl'
 import cx from 'classnames'
 
+import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+
 const SmallArrow = () => (
   <Icon
     className={cx(styles.DropdownFilter__icon, 'u-mr-1')}
-    icon="bottom"
+    icon={BottomIcon}
     color="var(--coolGrey)"
     width={16}
     height={16}
diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx
index bf0eb137f8..2a7040b844 100644
--- a/react/Avatar/index.jsx
+++ b/react/Avatar/index.jsx
@@ -5,6 +5,8 @@ import palette from '../palette'
 import styles from './styles.styl'
 import Icon from '../Icon'
 
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+
 const nameToColor = (name = '') => {
   const colors = [
     palette['azure'],
@@ -60,7 +62,7 @@ export const Avatar = ({
       {!image && text && (
         <span className={styles['c-avatar-initials']}>{text}</span>
       )}
-      {!image && !text && <Icon icon="people" />}
+      {!image && !text && <Icon icon={PeopleIcon} />}
     </div>
   )
 }
diff --git a/react/Button/index.jsx b/react/Button/index.jsx
index 1915e4251c..00b8ac492c 100644
--- a/react/Button/index.jsx
+++ b/react/Button/index.jsx
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 import styles from './styles.styl'
 import Icon, { iconPropType } from '../Icon'
 
+import SpinnerIcon from 'cozy-ui/transpiled/react/Icons/Spinner'
+
 const btnClass = function(options) {
   const { className, extension, size, theme, variant, round, align } = options
   return cx(
@@ -101,7 +103,7 @@ const BaseButton = props => {
         {restProps.busy && (
           <Icon
             size={sizeToIconSize[size]}
-            icon="spinner"
+            icon={SpinnerIcon}
             spin
             className="u-ml-half"
             aria-hidden
diff --git a/react/CipherIcon/index.jsx b/react/CipherIcon/index.jsx
index e3d3c0ca7a..7c6a335932 100644
--- a/react/CipherIcon/index.jsx
+++ b/react/CipherIcon/index.jsx
@@ -6,6 +6,8 @@ import Icon from '../Icon'
 import { withClient } from 'cozy-client'
 import { AppDoctype } from '../proptypes'
 
+import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
+
 class CipherIcon extends React.PureComponent {
   constructor(props) {
     super(props)
@@ -29,7 +31,7 @@ class CipherIcon extends React.PureComponent {
         <div className="u-pos-absolute u-right-0 u-bottom-0">
           <AppIcon fetchIcon={this.fetchIcon} className="u-w-1 u-h-1" />
         </div>
-        <Icon icon="keychain" size={32} />
+        <Icon icon={KeychainIcon} size={32} />
       </div>
     )
   }
diff --git a/react/ContextHeader/index.jsx b/react/ContextHeader/index.jsx
index 25a216ff0a..6273551093 100644
--- a/react/ContextHeader/index.jsx
+++ b/react/ContextHeader/index.jsx
@@ -7,6 +7,8 @@ import styles from './styles.styl'
 import palette from '../palette'
 import cx from 'classnames'
 
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+
 const ContextHeader = ({ icon, title, text, onClose, className }) => {
   return (
     <div className={cx(styles['context-header'], className)}>
@@ -24,7 +26,7 @@ const ContextHeader = ({ icon, title, text, onClose, className }) => {
           type="button"
         >
           <Icon
-            icon="cross"
+            icon={CrossIcon}
             width="14"
             height="14"
             color={palette['coolGrey']}
diff --git a/react/CozyDialogs/DialogBackButton.jsx b/react/CozyDialogs/DialogBackButton.jsx
index 2c7b31de33..d1b2ea016b 100644
--- a/react/CozyDialogs/DialogBackButton.jsx
+++ b/react/CozyDialogs/DialogBackButton.jsx
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
+
 const DialogBackButton = ({ onClick }) => {
   return (
     <Icon
       onClick={onClick}
-      icon="previous"
+      icon={PreviousIcon}
       className="u-c-pointer u-coolGrey u-mr-1"
     />
   )
diff --git a/react/CozyDialogs/DialogCloseButton.jsx b/react/CozyDialogs/DialogCloseButton.jsx
index 8c90c1c033..9adecc7da5 100644
--- a/react/CozyDialogs/DialogCloseButton.jsx
+++ b/react/CozyDialogs/DialogCloseButton.jsx
@@ -5,6 +5,8 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import styles from './styles.styl'
 
+import CrossMediumIcon from 'cozy-ui/transpiled/react/Icons/CrossMedium'
+
 const CloseButton = ({ onClick, ...props }) => {
   return (
     <IconButton
@@ -12,7 +14,7 @@ const CloseButton = ({ onClick, ...props }) => {
       className={styles.DialogCloseButton}
       {...props}
     >
-      <Icon icon="cross-medium" />
+      <Icon icon={CrossMediumIcon} />
     </IconButton>
   )
 }
diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx
index e0d47ad0ea..698e7114d1 100644
--- a/react/DateMonthPicker/index.jsx
+++ b/react/DateMonthPicker/index.jsx
@@ -7,6 +7,9 @@ import { format } from 'date-fns'
 import styles from './styles.styl'
 import cx from 'classnames'
 
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 const MonthButton = translate()(({ monthNum, f, onClick, isSelected }) => {
   // We do not care care about year and day since we are creating the date
   // only to be able to format it into a monthName
@@ -56,7 +59,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           title={year - 1}
           onClick={decreaseYear}
         >
-          <Icon icon="left" />
+          <Icon icon={LeftIcon} />
         </button>
         <div className={cx(styles.DateMonthPicker__Year)}>{year}</div>
         <button
@@ -64,7 +67,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           title={year + 1}
           onClick={increaseYear}
         >
-          <Icon icon="right" />
+          <Icon icon={RightIcon} />
         </button>
       </div>
       <div className={styles.DateMonthPicker__MonthGrid}>
diff --git a/react/DateMonthPicker/index.spec.jsx b/react/DateMonthPicker/index.spec.jsx
index 37c2259f5e..067068d894 100644
--- a/react/DateMonthPicker/index.spec.jsx
+++ b/react/DateMonthPicker/index.spec.jsx
@@ -3,6 +3,8 @@ import React from 'react'
 import DateMonthPicker from './index'
 import I18n from '../I18n'
 import { act } from 'react-dom/test-utils'
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
 
 const findButtonWithLabel = (root, label) =>
   root.findWhere(n => n.type() == 'button' && n.props().children === label)
@@ -46,7 +48,7 @@ describe('DateMonthPicker', () => {
 
   it('should be able to go to previous year', async () => {
     const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const prevYearButton = findButtonWithIcon(root, 'left')
+    const prevYearButton = findButtonWithIcon(root, LeftIcon)
     act(() => {
       prevYearButton.props().onClick()
     })
@@ -59,7 +61,7 @@ describe('DateMonthPicker', () => {
 
   it('should be able to go to next year', async () => {
     const { root, handleSelect } = setup({ initialValue: '2015-08' })
-    const nextYearButton = findButtonWithIcon(root, 'right')
+    const nextYearButton = findButtonWithIcon(root, RightIcon)
     act(() => {
       nextYearButton.props().onClick()
     })
diff --git a/react/DropdownButton/index.jsx b/react/DropdownButton/index.jsx
index f2ba5ccd59..3b9d4d03e3 100644
--- a/react/DropdownButton/index.jsx
+++ b/react/DropdownButton/index.jsx
@@ -3,6 +3,8 @@ import cx from 'classnames'
 import styles from './styles.styl'
 import Icon from '../Icon'
 
+import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+
 const DropdownButton = React.forwardRef(
   ({ children, className, ...props }, ref) => (
     <button
@@ -13,7 +15,7 @@ const DropdownButton = React.forwardRef(
     >
       {children}
       <Icon
-        icon="bottom"
+        icon={BottomIcon}
         size="12"
         className={styles['c-DropdownButton-Icon']}
       />
diff --git a/react/HistoryRow/index.jsx b/react/HistoryRow/index.jsx
index e49dcec049..0315deabaa 100644
--- a/react/HistoryRow/index.jsx
+++ b/react/HistoryRow/index.jsx
@@ -8,6 +8,8 @@ import palette from '../palette'
 
 import styles from './styles.styl'
 
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+
 /**
  *
  * This component display a timeline of file's version
@@ -44,7 +46,7 @@ const HistoryRow = ({
               <Icon
                 className="u-c-pointer"
                 color={palette.coolGrey}
-                icon="download"
+                icon={DownloadIcon}
                 onClick={() => downloadLink()}
               />
             </Img>
diff --git a/react/Icons/BottomSelect.jsx b/react/Icons/BottomSelect.jsx
new file mode 100644
index 0000000000..7cb33f5915
--- /dev/null
+++ b/react/Icons/BottomSelect.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/bottom-select.svg` to regenerate;
+import React from 'react'
+
+function SvgBottomSelect(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z"
+        fill="#95999d"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgBottomSelect
diff --git a/react/Icons/CheckWhite.jsx b/react/Icons/CheckWhite.jsx
new file mode 100644
index 0000000000..f1d32361bf
--- /dev/null
+++ b/react/Icons/CheckWhite.jsx
@@ -0,0 +1,17 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/check-white.svg` to regenerate;
+import React from 'react'
+
+function SvgCheckWhite(props) {
+  return (
+    <svg viewBox="0 0 20 20" {...props}>
+      <path
+        d="M3 10.019l4.523 4.523 9.541-9.541"
+        stroke="#FFF"
+        strokeWidth={2}
+        fill="none"
+      />
+    </svg>
+  )
+}
+
+export default SvgCheckWhite
diff --git a/react/Icons/CloudBroken.jsx b/react/Icons/CloudBroken.jsx
new file mode 100644
index 0000000000..69d251cc01
--- /dev/null
+++ b/react/Icons/CloudBroken.jsx
@@ -0,0 +1,23 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cloud-broken.svg` to regenerate;
+import React from 'react'
+
+function SvgCloudBroken(props) {
+  return (
+    <svg viewBox="0 0 160 160" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#93BEF8"
+          d="M61.763 130.593l-3.174 7.933h59.045-.003c23.356 0 42.369-19.126 42.369-42.634 0-22.218-16.977-40.52-38.56-42.467a42.494 42.494 0 00-12.426-25.27 42.873 42.873 0 00-4.68-3.992l-3.156 7.892c7.203 6.153 11.888 15.26 12.12 25.41.055 2.478 2.056 4.446 4.499 4.446h.34c18.71 0 33.93 15.405 33.93 34.338 0 18.936-15.22 34.34-33.93 34.34h-.324l-.01.004h-56.04zm39.415-106.538l3.157-7.892C97.128 10.86 88.462 8 79.387 8 68.245 8 57.724 12.311 49.76 20.158c-6.974 6.868-11.308 15.77-12.438 25.4-9.568 1.135-18.411 5.5-25.239 12.514C4.29 66.086 0 76.677 0 87.89c0 23.511 19 42.637 42.366 42.637H58.59l3.174-7.933H42.537c-.097-.007-.194-.007-.292-.007l-.107.007h-.275c-18.71 0-33.93-15.405-33.93-34.341 0-18.507 14.863-33.905 33.132-34.331 2.406-.056 4.343-2.017 4.398-4.45.419-18.494 15.638-33.538 33.92-33.538 8.248 0 15.873 3.062 21.795 8.122z"
+        />
+        <path
+          stroke="#297EF1"
+          strokeLinecap="round"
+          strokeWidth={8}
+          d="M50 156L110 4"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgCloudBroken
diff --git a/react/Icons/Cozy.jsx b/react/Icons/Cozy.jsx
new file mode 100644
index 0000000000..c733cc75f9
--- /dev/null
+++ b/react/Icons/Cozy.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cozy.svg` to regenerate;
+import React from 'react'
+
+function SvgCozy(props) {
+  return (
+    <svg viewBox="0 0 52 52" {...props}>
+      <path
+        fill="#297EF2"
+        fillRule="evenodd"
+        d="M38.231 44H13.769C6.175 44 0 37.756 0 30.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.887 13.887 0 014.042-8.292A13.608 13.608 0 0125.801 4c3.62 0 7.04 1.407 9.629 3.968a13.897 13.897 0 014.038 8.25C46.482 16.853 52 22.828 52 30.082 52 37.756 45.82 44 38.23 44h.001zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11c-.779 0-1.417-.627-1.435-1.417C36.492 11.794 31.637 7 25.803 7c-5.835 0-10.692 4.796-10.826 10.69a1.445 1.445 0 01-1.403 1.42C7.744 19.244 3 24.153 3 30.052 3 36.09 7.857 41 13.828 41h.088l.035-.002c.03 0 .062 0 .093.002h24.021l.003-.001zm-4.302-11.776c-.875-.585-.918-1.659-.92-1.706A.52.52 0 0032.32 27a.523.523 0 00-.506.536c.002.039.016.543.251 1.137a7.99 7.99 0 01-11.138.019 3.554 3.554 0 00.257-1.155.523.523 0 00-.503-.536.526.526 0 00-.528.515c0 .043-.042 1.121-.92 1.706a.536.536 0 00-.15.731.51.51 0 00.714.154c.225-.15.414-.322.572-.505a9.006 9.006 0 0012.251-.01c.16.184.35.36.582.515a.503.503 0 00.281.085.516.516 0 00.432-.24.537.537 0 00-.15-.731v.002z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCozy
diff --git a/react/Icons/CozyLogo.jsx b/react/Icons/CozyLogo.jsx
new file mode 100644
index 0000000000..12e5f156c0
--- /dev/null
+++ b/react/Icons/CozyLogo.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cozy-logo.svg` to regenerate;
+import React from 'react'
+
+function SvgCozyLogo(props) {
+  return (
+    <svg viewBox="0 0 101 30" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path d="M0-5h101v40H0z" />
+        <path
+          fill="#297EF1"
+          d="M29.408 30H10.592C4.75 30 0 25.317 0 19.56c0-2.745 1.072-5.338 3.02-7.3a10.589 10.589 0 016.31-3.064 10.316 10.316 0 013.11-6.22A10.607 10.607 0 0119.847 0a10.61 10.61 0 017.406 2.976 10.324 10.324 0 013.107 6.187C35.756 9.64 40 14.121 40 19.561 40 25.317 35.247 30 29.408 30zm-.226-2.5h.079c4.543 0 8.239-3.612 8.239-8.05 0-4.438-3.696-8.048-8.239-8.048h-.083a1.08 1.08 0 01-1.092-1.043C27.983 6.025 24.289 2.5 19.85 2.5c-4.44 0-8.135 3.526-8.237 7.86a1.08 1.08 0 01-1.068 1.044c-4.436.1-8.045 3.709-8.045 8.047 0 4.438 3.696 8.049 8.239 8.049h.067l.026-.002c.024 0 .047 0 .07.002h18.281zm-3.127-8.333v-.002a.38.38 0 01.125.55.453.453 0 01-.594.116 2.329 2.329 0 01-.485-.387c-1.448 1.204-3.28 1.806-5.11 1.806-1.827 0-3.654-.6-5.1-1.798a2.31 2.31 0 01-.476.378.455.455 0 01-.595-.115c-.13-.183-.074-.428.125-.549.732-.438.767-1.247.767-1.279.008-.217.206-.393.44-.386.235.005.423.185.419.402 0 .03-.013.414-.214.866 2.603 2.255 6.684 2.252 9.282-.014-.196-.446-.208-.824-.21-.853-.005-.217.184-.398.422-.402.238-.003.432.169.437.388.002.035.038.84.767 1.279zm33.222-4.905a1.405 1.405 0 01-.227.227.516.516 0 01-.319.085.756.756 0 01-.436-.162 5.113 5.113 0 00-1.404-.702c-.325-.109-.725-.163-1.202-.163-.624 0-1.174.113-1.651.338a3.179 3.179 0 00-1.19.962c-.316.416-.556.923-.721 1.521a7.592 7.592 0 00-.247 2.015c0 .771.087 1.458.26 2.06.173.603.42 1.11.741 1.521.32.412.71.724 1.17.937.46.212.97.318 1.534.318.546 0 .997-.067 1.352-.202.355-.134.65-.279.884-.435a5.93 5.93 0 00.585-.436c.156-.134.316-.201.481-.201.208 0 .368.078.481.234l.728.936a4.903 4.903 0 01-1.02.949 5.85 5.85 0 01-1.203.637 6.792 6.792 0 01-1.332.364 8.488 8.488 0 01-1.411.117 5.846 5.846 0 01-2.308-.455 5.228 5.228 0 01-1.858-1.326c-.525-.58-.939-1.293-1.242-2.139-.303-.845-.455-1.804-.455-2.879 0-.98.136-1.885.41-2.717a6.046 6.046 0 011.209-2.151 5.588 5.588 0 011.969-1.418c.78-.342 1.673-.513 2.678-.513.945 0 1.777.152 2.496.455.72.303 1.36.732 1.924 1.287l-.676.936zm8.814-2.678c.97 0 1.848.158 2.633.474a5.489 5.489 0 012.001 1.366c.55.593.973 1.308 1.268 2.145.295.836.442 1.774.442 2.814s-.147 1.98-.442 2.821c-.295.84-.717 1.556-1.267 2.145a5.527 5.527 0 01-2.002 1.358c-.785.317-1.662.475-2.633.475-.98 0-1.861-.158-2.645-.474a5.59 5.59 0 01-2.009-1.359c-.555-.59-.981-1.304-1.28-2.145-.3-.84-.449-1.781-.449-2.821 0-1.04.15-1.978.449-2.814a6.11 6.11 0 011.28-2.146 5.55 5.55 0 012.008-1.365c.785-.316 1.667-.474 2.646-.474zm0 11.622c1.248 0 2.18-.42 2.795-1.261.615-.84.923-2.024.923-3.549s-.308-2.71-.923-3.556c-.615-.845-1.547-1.267-2.795-1.267-1.265 0-2.208.422-2.828 1.267-.62.846-.929 2.03-.929 3.556 0 1.525.31 2.708.93 3.549.62.84 1.562 1.261 2.827 1.261zM86.46 12.858c0 .182-.032.36-.097.533-.066.173-.15.32-.254.442l-6.929 9.178h7.046V25H76.203v-1.066c0-.121.03-.266.091-.436.06-.169.147-.327.26-.474l6.968-9.243h-6.916v-1.989h9.854v1.066zm14.144-1.066l-7.332 17.043a1.07 1.07 0 01-.312.442c-.13.104-.32.156-.572.156h-1.885l2.418-5.265L87.5 11.792h2.21c.217 0 .386.052.507.156a.906.906 0 01.26.351l3.354 7.93c.07.2.136.4.201.605a6.6 6.6 0 01.163.604 14.609 14.609 0 01.416-1.222l3.237-7.917a.84.84 0 01.286-.364.729.729 0 01.442-.143h2.028z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgCozyLogo
diff --git a/react/Icons/CrossWhite.jsx b/react/Icons/CrossWhite.jsx
new file mode 100644
index 0000000000..a2815be1e6
--- /dev/null
+++ b/react/Icons/CrossWhite.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/cross-white.svg` to regenerate;
+import React from 'react'
+
+function SvgCrossWhite(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="#FFF"
+        fillRule="evenodd"
+        d="M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCrossWhite
diff --git a/react/Icons/DashWhite.jsx b/react/Icons/DashWhite.jsx
new file mode 100644
index 0000000000..50412fab76
--- /dev/null
+++ b/react/Icons/DashWhite.jsx
@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/dash-white.svg` to regenerate;
+import React from 'react'
+
+function SvgDashWhite(props) {
+  return (
+    <svg viewBox="0 0 20 20" {...props}>
+      <path d="M3.497 10h13.006" stroke="#FFF" strokeWidth={2} />
+    </svg>
+  )
+}
+
+export default SvgDashWhite
diff --git a/react/Icons/DeviceBrowser.jsx b/react/Icons/DeviceBrowser.jsx
new file mode 100644
index 0000000000..7d50f9db6a
--- /dev/null
+++ b/react/Icons/DeviceBrowser.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/device-browser.svg` to regenerate;
+import React from 'react'
+
+function SvgDeviceBrowser(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <circle cx={16} cy={16} r={16} fill="#D9DDE1" />
+        <path
+          fill="#95999D"
+          d="M22.76 2.84l.3-1.202.089.044c.115.058.23.117.344.177l.335.184.33.19.338.207.325.209c.231.153.459.312.682.477l.261.198.317.251.359.3.237.208.264.242.238.228.246.245.163.17.221.237.273.306.188.22.314.386.167.217.248.336.189.268.183.271.25.39.19.317.086.149c.135.236.264.476.388.72l.18.368.133.287.166.382.156.387c.173.447.327.903.461 1.369l.032.114c-.575.89-1.613 1.055-2.356.605l-.12-.08-.838-.613a.303.303 0 00-.255-.05l-.063.024-1.075.551a.044.044 0 00.002.03l.3.111a.33.33 0 01.07.036c.88.611.968 1.649.451 2.339l-.087.106-.758.852a1.689 1.689 0 01-2.01.37l-.13-.074-2.045-1.288c-.007-.005-.011-.007-.023-.002l-.01.008-.161.95v.012l.007.01 1.067.974c.55.502.678 1.291.331 1.929l-.081.134-1.697 2.51-.049.15-.148 3.609c-.014.36-.15.7-.386.973l-.107.113-2.316 2.215c-.316.303-.734.46-1.156.46-.23 0-.459-.046-.674-.14l-.159-.08-1.5-.859a1.626 1.626 0 01-.74-.902l-.039-.143-.69-3.08-.663-1.739-.007-.01-.013-.005-3.03-.257a1.663 1.663 0 01-1.198-.666l-.087-.131-1.724-2.902a1.596 1.596 0 01-.22-.893l.016-.155.434-2.815c.056-.367.237-.697.513-.945l.124-.101 2.648-1.95a1.688 1.688 0 011.48-.253l.149.052 2.524 1.029.04.013.043.007 3.411.363.207-.053 2.268-1.587.009-.013-.001-.015-.219-.477-.008-.01-.012-.004-6.61-.353a1.692 1.692 0 01-.729-.21 1.596 1.596 0 01-.817-1.605 1.615 1.615 0 011.06-1.303l.147-.046 1.918-.504.127-.07 2.376-2.19c.225-.207.509-.349.811-.408l.153-.022 3.652-.367c.01-.001.019-.008.02-.018z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgDeviceBrowser
diff --git a/react/Icons/DeviceLaptop.jsx b/react/Icons/DeviceLaptop.jsx
new file mode 100644
index 0000000000..be375d9591
--- /dev/null
+++ b/react/Icons/DeviceLaptop.jsx
@@ -0,0 +1,22 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/device-laptop.svg` to regenerate;
+import React from 'react'
+
+function SvgDeviceLaptop(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#32363F"
+          d="M2 25V5.995C2 4.893 2.9 4 3.991 4H28.01C29.109 4 30 4.902 30 5.995V25H2z"
+        />
+        <path fill="#5D6165" d="M4 6h24v16H4z" />
+        <path
+          fill="#95999D"
+          d="M19 24.5c0 .276-.233.5-.503.5h-5.994a.507.507 0 01-.503-.5c0-.276-.229-.5-.5-.5H.5c-.276 0-.5.215-.5.49V26c0 1.105.89 2 2.002 2h27.996A1.996 1.996 0 0032 26v-1.51c0-.27-.226-.49-.494-.49H19.494a.502.502 0 00-.494.5z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgDeviceLaptop
diff --git a/react/Icons/DevicePhone.jsx b/react/Icons/DevicePhone.jsx
new file mode 100644
index 0000000000..7d06f8788b
--- /dev/null
+++ b/react/Icons/DevicePhone.jsx
@@ -0,0 +1,27 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/device-phone.svg` to regenerate;
+import React from 'react'
+
+function SvgDevicePhone(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#95999D"
+          d="M23.333 32H8.667C7.193 32 6 30.753 6 29.217V2.783C6 1.247 7.193 0 8.667 0h14.666C24.805 0 26 1.247 26 2.783v26.434C26 30.753 24.805 32 23.333 32z"
+        />
+        <path
+          fill="#F5F6F7"
+          fillRule="nonzero"
+          d="M14 2.001a.5.5 0 110-1L18 1a.5.5 0 110 1l-4 .001z"
+        />
+        <path
+          fill="#F5F6F7"
+          d="M17.5 29.5a1.5 1.5 0 11-3.001-.001 1.5 1.5 0 013.001.001z"
+        />
+        <path fill="#32363F" d="M7 3h18v25H7z" />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgDevicePhone
diff --git a/react/Icons/DeviceTablet.jsx b/react/Icons/DeviceTablet.jsx
new file mode 100644
index 0000000000..7495284a98
--- /dev/null
+++ b/react/Icons/DeviceTablet.jsx
@@ -0,0 +1,20 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/device-tablet.svg` to regenerate;
+import React from 'react'
+
+function SvgDeviceTablet(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(4)">
+        <rect width={24} height={32} fill="#32363F" rx={2} />
+        <path fill="#5D6165" d="M2 3h20v26H2z" />
+        <path
+          fill="#95999D"
+          fillRule="nonzero"
+          d="M10 31.001a.5.5 0 110-1L14 30a.5.5 0 010 1l-4 .001zm1.5-29.5a.5.5 0 111 0 .5.5 0 01-1 0z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgDeviceTablet
diff --git a/react/Icons/DotsWhite.jsx b/react/Icons/DotsWhite.jsx
new file mode 100644
index 0000000000..058bbdbb63
--- /dev/null
+++ b/react/Icons/DotsWhite.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/dots-white.svg` to regenerate;
+import React from 'react'
+
+function SvgDotsWhite(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fill="#FFF"
+        fillRule="evenodd"
+        d="M2 10a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4z"
+      />
+    </svg>
+  )
+}
+
+export default SvgDotsWhite
diff --git a/react/Icons/FileTypeAudio.jsx b/react/Icons/FileTypeAudio.jsx
new file mode 100644
index 0000000000..4a7d5aea71
--- /dev/null
+++ b/react/Icons/FileTypeAudio.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-audio.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeAudio(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+        <rect width={30} height={30} fill="#ACF6F7" rx={2} />
+        <path
+          fill="#0CCBD0"
+          d="M8 19.998a2 2 0 00-.002 4H9c1.657 0 3-1.35 3-2.997v-7.679a.63.63 0 01.492-.601l6.016-1.129c.272-.05.492.124.492.418v5.478c0 .282-.215.51-.49.51H17c-1.105 0-2 .904-2 1.997v-.179a2 2 0 001.998 1.997H18c1.657 0 3-1.349 3-2.993V7c0-.554-.445-.921-.976-.825L10.976 7.82C10.437 7.918 10 8.454 10 9v10.498c0 .276-.215.5-.49.5H8z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeAudio
diff --git a/react/Icons/FileTypeBin.jsx b/react/Icons/FileTypeBin.jsx
new file mode 100644
index 0000000000..d68c164013
--- /dev/null
+++ b/react/Icons/FileTypeBin.jsx
@@ -0,0 +1,25 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-bin.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeBin(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#D1D5DB"
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        />
+        <path
+          fill="#A3ACB8"
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+        />
+        <path
+          fill="#4F5B69"
+          d="M7 15.568c0-.597.06-1.12.178-1.568.118-.449.285-.82.5-1.115a2.11 2.11 0 01.772-.664c.3-.147.633-.221 1.001-.221.786 0 1.391.29 1.815.87.424.58.636 1.479.636 2.698 0 .602-.059 1.128-.177 1.577-.119.449-.286.822-.501 1.12a2.084 2.084 0 01-.776.669 2.265 2.265 0 01-1.006.22c-.792 0-1.397-.306-1.815-.918C7.209 17.623 7 16.734 7 15.568zm3.705 0a9.152 9.152 0 00-.019-.58l-2.292 2.191c.193.597.546.895 1.057.895.4 0 .708-.2.926-.6.219-.4.328-1.035.328-1.906zm-2.507 0a7.965 7.965 0 00.018.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.402-.322 1.03-.322 1.882zm5.35 0c0-.597.06-1.12.179-1.568.118-.449.285-.82.5-1.115a2.11 2.11 0 01.772-.664c.3-.147.633-.221 1.001-.221.786 0 1.39.29 1.815.87.424.58.636 1.479.636 2.698 0 .602-.06 1.128-.178 1.577-.118.449-.285.822-.5 1.12a2.08 2.08 0 01-.777.669 2.265 2.265 0 01-1.005.22c-.792 0-1.397-.306-1.815-.918-.418-.613-.627-1.502-.627-2.668zm3.706 0a9.153 9.153 0 00-.02-.58l-2.291 2.191c.193.597.546.895 1.057.895.4 0 .708-.2.926-.6.218-.4.328-1.035.328-1.906zm-2.508 0a7.965 7.965 0 00.02.55l2.282-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.402-.323 1.03-.323 1.882zm5.988 2.368h1.431v-4.295l-1.235.993-.561-.786 2.133-1.71h.823v5.798h1.404v1.081h-3.995v-1.08zM7 24.413c0-.596.06-1.119.178-1.568.118-.449.285-.82.5-1.115a2.11 2.11 0 01.772-.664c.3-.147.633-.22 1.001-.22.786 0 1.391.29 1.815.869.424.58.636 1.48.636 2.698 0 .603-.059 1.128-.177 1.577-.119.449-.286.822-.501 1.12a2.075 2.075 0 01-.776.669A2.265 2.265 0 019.442 28c-.792 0-1.397-.306-1.815-.919C7.209 26.468 7 25.58 7 24.413zm3.705 0a9.152 9.152 0 00-.019-.58l-2.292 2.192c.193.596.546.894 1.057.894.4 0 .708-.2.926-.6.219-.4.328-1.035.328-1.906zm-2.507 0a7.965 7.965 0 00.018.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.403-.322 1.03-.322 1.882zm5.987 2.368h1.431v-4.295l-1.235.993-.56-.786 2.132-1.71h.824v5.798h1.403v1.081h-3.995v-1.08zm5.913-2.368c0-.596.059-1.119.177-1.568.119-.449.286-.82.501-1.115.215-.295.472-.516.772-.664.3-.147.633-.22 1-.22.787 0 1.392.29 1.816.869.424.58.636 1.48.636 2.698 0 .603-.06 1.128-.178 1.577-.118.449-.285.822-.5 1.12a2.07 2.07 0 01-.777.669A2.265 2.265 0 0122.54 28c-.793 0-1.398-.306-1.815-.919-.418-.613-.627-1.502-.627-2.668zm3.704 0a9.152 9.152 0 00-.018-.58l-2.292 2.192c.193.596.545.894 1.057.894.399 0 .708-.2.926-.6.218-.4.327-1.035.327-1.906zm-2.507 0a7.965 7.965 0 00.019.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.403-.323 1.03-.323 1.882z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeBin
diff --git a/react/Icons/FileTypeCode.jsx b/react/Icons/FileTypeCode.jsx
new file mode 100644
index 0000000000..56b23227e6
--- /dev/null
+++ b/react/Icons/FileTypeCode.jsx
@@ -0,0 +1,25 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-code.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeCode(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#E6D5FF"
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        />
+        <path
+          fill="#9C59FF"
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+        />
+        <g stroke="#9C59FF" strokeWidth={2}>
+          <path strokeLinejoin="round" d="M12 22l-4-4 4-4m8 8l4-4-4-4" />
+          <path d="M14 25l4-14" />
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeCode
diff --git a/react/Icons/FileTypeFiles.jsx b/react/Icons/FileTypeFiles.jsx
new file mode 100644
index 0000000000..9cafcf40ae
--- /dev/null
+++ b/react/Icons/FileTypeFiles.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-files.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeFiles(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#D1D5DB"
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        />
+        <path
+          fill="#A3ACB8"
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeFiles
diff --git a/react/Icons/FileTypeFolder.jsx b/react/Icons/FileTypeFolder.jsx
new file mode 100644
index 0000000000..26836cbe6b
--- /dev/null
+++ b/react/Icons/FileTypeFolder.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-folder.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeFolder(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(0 2)">
+        <rect width={32} height={26} y={2} fill="#B2D3FF" rx={2} />
+        <path
+          fill="#197BFF"
+          d="M0 .99A1 1 0 011.007 0h11.986c.556 0 1.32.313 1.718.71l.578.58c.393.392 1.156.71 1.712.71h13.005C31.107 2 32 2.895 32 4H17c-.552 0-1.313.313-1.71.71l-.58.58c-.392.392-1.16.71-1.717.71H1.007A1.004 1.004 0 010 5.01V.99z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeFolder
diff --git a/react/Icons/FileTypeImage.jsx b/react/Icons/FileTypeImage.jsx
new file mode 100644
index 0000000000..6097927628
--- /dev/null
+++ b/react/Icons/FileTypeImage.jsx
@@ -0,0 +1,25 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-image.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeImage(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(0 3)">
+        <rect width={32} height={26} fill="#8EE39B" rx={2} />
+        <path
+          fill="#1EC737"
+          d="M0 20l6.29-6.29a.999.999 0 011.416-.004L11 17l8.294-8.294a1.003 1.003 0 011.412 0L32 20v4.002C32 25.106 31.11 26 29.998 26H2.002A2.002 2.002 0 010 24.002V20z"
+        />
+        <circle cx={8} cy={7} r={3} fill="#FFF" />
+        <path
+          stroke="#8EE39B"
+          d="M11 16l-5.5 5.5L11 16z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeImage
diff --git a/react/Icons/FileTypePdf.jsx b/react/Icons/FileTypePdf.jsx
new file mode 100644
index 0000000000..ba65b462f2
--- /dev/null
+++ b/react/Icons/FileTypePdf.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-pdf.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypePdf(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#FCD0D5"
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        />
+        <path
+          fill="#F1132D"
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM9 11h14v2H9v-2zm0 4h12v2H9v-2zm.066 4.784h1.904c.283 0 .548.028.796.084.248.056.464.15.648.28.184.13.33.304.436.52.107.216.16.481.16.796 0 .304-.055.568-.164.792a1.54 1.54 0 01-.444.552 1.89 1.89 0 01-.648.32 2.87 2.87 0 01-.784.104h-.728V25H9.066v-5.216zm1.832 2.512c.64 0 .96-.277.96-.832 0-.272-.081-.464-.244-.576-.163-.112-.401-.168-.716-.168h-.656v1.576h.656zm3.016-2.512h1.472c.4 0 .76.05 1.08.152.32.101.595.257.824.468.23.21.405.479.528.804.123.325.184.712.184 1.16 0 .448-.061.837-.184 1.168-.123.33-.296.604-.52.82a2.137 2.137 0 01-.804.484c-.312.107-.66.16-1.044.16h-1.536v-5.216zm1.4 4.264c.224 0 .427-.03.608-.088.181-.059.336-.153.464-.284a1.33 1.33 0 00.3-.516 2.5 2.5 0 00.108-.792c0-.31-.036-.57-.108-.78a1.263 1.263 0 00-.3-.504 1.092 1.092 0 00-.464-.268 2.152 2.152 0 00-.608-.08h-.224v3.312h.224zm3.68-4.264h3.288v.992H20.17v1.208h1.808v.992H20.17V25h-1.176v-5.216z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypePdf
diff --git a/react/Icons/FileTypeSheet.jsx b/react/Icons/FileTypeSheet.jsx
new file mode 100644
index 0000000000..507cc1dec7
--- /dev/null
+++ b/react/Icons/FileTypeSheet.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-sheet.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeSheet(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#9FE6A2"
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        />
+        <path
+          fill="#0FC016"
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM8 9h4v2H8V9zm0-4h4v2H8V5zm0 8h4v2H8v-2zm0 4h4v2H8v-2zm0 4h4v2H8v-2zm0 4h4v2H8v-2zm6-16h4v2h-4V9zm0-4h4v2h-4V5zm0 8h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm6-12h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeSheet
diff --git a/react/Icons/FileTypeSlide.jsx b/react/Icons/FileTypeSlide.jsx
new file mode 100644
index 0000000000..8ffb5b1de5
--- /dev/null
+++ b/react/Icons/FileTypeSlide.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-slide.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeSlide(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#FFDEC1"
+          d="M0 3.991C0 2.891.89 2 2.004 2H25l7 7v19.005C32 29.107 31.11 30 29.998 30H2.002C.896 30 0 29.1 0 28.009V3.99z"
+        />
+        <path
+          fill="#FF9433"
+          d="M24.5 2c-.276 0-.5.23-.5.5V10h7.5c.276 0 .5-.232.5-.5V9l-7-7h-.5zM9.996 18h16v2h-16v-2zm0 4h16v2h-16v-2zM6 18h2v2H6v-2zm0 4h2v2H6v-2zm10-6a4 4 0 004-4h-4V8a4 4 0 100 8zm1-5V7c2 0 4 2 4 4h-4z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeSlide
diff --git a/react/Icons/FileTypeText.jsx b/react/Icons/FileTypeText.jsx
new file mode 100644
index 0000000000..9a14a95f36
--- /dev/null
+++ b/react/Icons/FileTypeText.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-text.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeText(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#B2D3FF"
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+        />
+        <path
+          fill="#197BFF"
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM9 11h14v2H9v-2zm0 4h12v2H9v-2zm0 4h14v2H9v-2zm0 4h10v2H9v-2z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeText
diff --git a/react/Icons/FileTypeVideo.jsx b/react/Icons/FileTypeVideo.jsx
new file mode 100644
index 0000000000..b5b6c2594a
--- /dev/null
+++ b/react/Icons/FileTypeVideo.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-video.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeVideo(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#FFC5CE"
+          d="M1 2.992C1 1.892 1.898 1 2.992 1h26.016C30.108 1 31 1.898 31 2.992v26.016c0 1.1-.898 1.992-1.992 1.992H2.992C1.892 31 1 30.102 1 29.008V2.992zm1 12.017C2 14.452 2.443 14 3.01 14h1.98c.558 0 1.01.443 1.01 1.01v1.98C6 17.549 5.557 18 4.99 18H3.01C2.451 18 2 17.557 2 16.99v-1.98zm24 0c0-.557.443-1.009 1.01-1.009h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zM2 9a1 1 0 011.01-1h1.98C5.549 8 6 8.444 6 9v3a1 1 0 01-1.01 1H3.01C2.451 13 2 12.556 2 12V9zm24 0a1 1 0 011.01-1h1.98c.558 0 1.01.444 1.01 1v3a1 1 0 01-1.01 1h-1.98c-.558 0-1.01-.444-1.01-1V9zM2 26a1 1 0 011.01-1h1.98c.558 0 1.01.444 1.01 1v3a1 1 0 01-1.01 1H3.01C2.451 30 2 29.556 2 29v-3zm24 0a1 1 0 011.01-1h1.98c.558 0 1.01.444 1.01 1v3a1 1 0 01-1.01 1h-1.98c-.558 0-1.01-.444-1.01-1v-3zM2 3a1 1 0 011.01-1h1.98C5.549 2 6 2.444 6 3v3a1 1 0 01-1.01 1H3.01C2.451 7 2 6.556 2 6V3zm24 0a1 1 0 011.01-1h1.98c.558 0 1.01.444 1.01 1v3a1 1 0 01-1.01 1h-1.98C26.451 7 26 6.556 26 6V3zM2 20a1 1 0 011.01-1h1.98c.558 0 1.01.444 1.01 1v3a1 1 0 01-1.01 1H3.01C2.451 24 2 23.556 2 23v-3zm24 0a1 1 0 011.01-1h1.98c.558 0 1.01.444 1.01 1v3a1 1 0 01-1.01 1h-1.98c-.558 0-1.01-.444-1.01-1v-3z"
+        />
+        <path
+          fill="#FF405D"
+          d="M12 10.615c0-.554.38-.775.853-.491l8.294 4.977c.471.282.473.739 0 1.023L12.853 21.1c-.471.282-.853.055-.853-.491v-9.995z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeVideo
diff --git a/react/Icons/FileTypeZip.jsx b/react/Icons/FileTypeZip.jsx
new file mode 100644
index 0000000000..d68ed9a93e
--- /dev/null
+++ b/react/Icons/FileTypeZip.jsx
@@ -0,0 +1,18 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/file-type-zip.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeZip(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd" transform="translate(3)">
+        <rect width={26} height={32} fill="#D1D5DB" rx={2} />
+        <path
+          fill="#4F5B69"
+          d="M11 1h2v2h-2V1zm0 4h2v2h-2V5zm0 4h2v2h-2V9zm2-6h2v2h-2V3zm0 4h2v2h-2V7zm-2 5h4v7h-4v-7zm1 1h2v2h-2v-2z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgFileTypeZip
diff --git a/react/Icons/Google.jsx b/react/Icons/Google.jsx
new file mode 100644
index 0000000000..45f1b7676f
--- /dev/null
+++ b/react/Icons/Google.jsx
@@ -0,0 +1,29 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/google.svg` to regenerate;
+import React from 'react'
+
+function SvgGoogle(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#3E82F1"
+          d="M15.526 6.413h-7.38v3.03h4.22a3.651 3.651 0 01-1.565 2.365l2.53 1.959a7.053 7.053 0 001.934-3.076 9.064 9.064 0 00.261-4.288v.01z"
+        />
+        <path
+          fill="#32A753"
+          d="M10.801 11.808a4.714 4.714 0 01-2.654.747h-.033A4.592 4.592 0 014.49 10.7a4.698 4.698 0 01-.695-1.306c0-.026-.023-.052-.033-.081L1.988 10.7l-.855.657a7.883 7.883 0 002.651 2.991 7.787 7.787 0 004.33 1.326h.033a7.484 7.484 0 005.185-1.897l-2.53-1.97z"
+        />
+        <path
+          fill="#F9BB00"
+          d="M3.761 6.348L1.988 4.973l-.855-.656c-.105.212-.2.43-.288.653a7.79 7.79 0 000 5.727c.088.226.183.444.288.653l.845-.653 1.773-1.374a4.649 4.649 0 010-2.978l.01.003z"
+        />
+        <path
+          fill="#E74133"
+          d="M8.147 0h-.033a7.836 7.836 0 00-6.981 4.317l.845.653 1.774 1.375c0-.03.022-.056.032-.082a4.7 4.7 0 01.696-1.306 4.591 4.591 0 013.624-1.855h.033a4.246 4.246 0 012.994 1.17l2.244-2.215A7.54 7.54 0 008.147 0"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgGoogle
diff --git a/react/Icons/Keychain.jsx b/react/Icons/Keychain.jsx
new file mode 100644
index 0000000000..be5fd019f3
--- /dev/null
+++ b/react/Icons/Keychain.jsx
@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/keychain.svg` to regenerate;
+import React from 'react'
+
+function SvgKeychain(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#D1D5DB"
+          d="M22 0h.28A10 10 0 0132 9.72v.56A10 10 0 0122.28 20h-.56a9.96 9.96 0 01-3.42-.7L7.18 30.77A4 4 0 014.3 32H2a2 2 0 01-2-2v-3.8c0-.45.18-.88.5-1.2l.05-.05a2 2 0 011.08-.56l.89-.14A1.77 1.77 0 004 22.5V22a1 1 0 011-1h.5c.83 0 1.5-.67 1.5-1.5V19a1 1 0 011-1h.75c.69 0 1.25-.56 1.25-1.25v-.42a2 2 0 01.59-1.42l1.88-1.88A10 10 0 0122 0zm.14 4c-.46 0-.93.05-1.39.17a2 2 0 00-1.04 3.25l.1.11 4.66 4.66a2 2 0 003.32-.8l.04-.14c.45-1.84 0-3.85-1.36-5.33l-.19-.2A5.83 5.83 0 0022.42 4h-.28z"
+        />
+        <path
+          fill="#95999D"
+          d="M15.45 17.55c.54.47 1.13.89 1.77 1.23L4 32H2a2 2 0 01-.82-.18l14.27-14.27z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgKeychain
diff --git a/react/Icons/LogoutLarge.jsx b/react/Icons/LogoutLarge.jsx
new file mode 100644
index 0000000000..39ff46a2a6
--- /dev/null
+++ b/react/Icons/LogoutLarge.jsx
@@ -0,0 +1,30 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/logout-large.svg` to regenerate;
+import React from 'react'
+
+function SvgLogoutLarge(props) {
+  return (
+    <svg {...props}>
+      <g fill="none" fillRule="evenodd">
+        <rect
+          width={27.5}
+          height={32.5}
+          x={1.25}
+          y={1.25}
+          fill="#D9DDE1"
+          rx={2}
+        />
+        <path
+          fill="#95999D"
+          d="M4.74 1.45l13.75 5.91A2.5 2.5 0 0120 9.65v27.61a2.5 2.5 0 01-3.49 2.29L2.76 33.64a2.49 2.49 0 01-1.51-2.29V3.74a2.5 2.5 0 013.49-2.29z"
+        />
+        <path
+          fill="#95999D"
+          fillRule="nonzero"
+          d="M34.3 12.92l.15.13 5 5c.69.69.73 1.77.13 2.5l-.13.15-5 5-.14.13a1.88 1.88 0 01-2.64-2.64l.13-.14 1.8-1.8h-7.98a1.88 1.88 0 01-.18-3.74l.18-.01h7.98l-1.8-1.8a1.87 1.87 0 012.5-2.78z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgLogoutLarge
diff --git a/react/Icons/ShareGrey08.jsx b/react/Icons/ShareGrey08.jsx
new file mode 100644
index 0000000000..b140d33476
--- /dev/null
+++ b/react/Icons/ShareGrey08.jsx
@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/share-grey08.svg` to regenerate;
+import React from 'react'
+
+function SvgShareGrey08(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <g fill="#32363F" fillRule="evenodd">
+        <path d="M5.083 10.16a3 3 0 110-4.319l4.94-2.47a3 3 0 11.895 1.789l-4.94 2.47a3.03 3.03 0 010 .74l4.94 2.47a3 3 0 11-.895 1.789l-4.94-2.47z" />
+        <path d="M5.083 10.16a3 3 0 110-4.319l4.94-2.47a3 3 0 11.895 1.789l-4.94 2.47a3.03 3.03 0 010 .74l4.94 2.47a3 3 0 11-.895 1.789l-4.94-2.47z" />
+      </g>
+    </svg>
+  )
+}
+
+export default SvgShareGrey08
diff --git a/react/Icons/TopSelect.jsx b/react/Icons/TopSelect.jsx
new file mode 100644
index 0000000000..d2f5ab52a8
--- /dev/null
+++ b/react/Icons/TopSelect.jsx
@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/illus/top-select.svg` to regenerate;
+import React from 'react'
+
+function SvgTopSelect(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z"
+        fill="#95999d"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgTopSelect
diff --git a/react/Infos/index.jsx b/react/Infos/index.jsx
index 354fcbbd5d..57575519f2 100644
--- a/react/Infos/index.jsx
+++ b/react/Infos/index.jsx
@@ -9,6 +9,8 @@ import createDepreciationLogger from '../helpers/createDepreciationLogger'
 
 import styles from './styles.styl'
 
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+
 export const Infos = ({
   description,
   action,
@@ -26,7 +28,7 @@ export const Infos = ({
       </Stack>
       {dismissAction && (
         <button className={styles['Info-close']} onClick={dismissAction}>
-          <Icon icon="cross" color={palette['coolGrey']} />
+          <Icon icon={CrossIcon} color={palette['coolGrey']} />
         </button>
       )}
     </div>
diff --git a/react/InfosCarrousel/index.jsx b/react/InfosCarrousel/index.jsx
index eeca6d5231..19ca06b023 100644
--- a/react/InfosCarrousel/index.jsx
+++ b/react/InfosCarrousel/index.jsx
@@ -8,6 +8,9 @@ import styles from './styles.styl'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 const useClampedValue = (initialValue, min, max) => {
   const [value, setValue] = useState(initialValue)
 
@@ -54,11 +57,11 @@ const InfosCarrousel = ({ children, theme, className, swipeableProps }) => {
       {React.Children.count(children) > 1 ? (
         <div className={styles['InfosCarrousel-navigation']}>
           <IconButton onClick={goToPreviousInfos} disabled={hasPreviousInfos}>
-            <Icon icon="left" />
+            <Icon icon={LeftIcon} />
           </IconButton>
           <span className={styles['InfosCarrousel-separator']} />
           <IconButton onClick={goToNextInfos} disabled={hasNextInfos}>
-            <Icon icon="right" />
+            <Icon icon={RightIcon} />
           </IconButton>
         </div>
       ) : null}
diff --git a/react/Labs/CollectionField/index.jsx b/react/Labs/CollectionField/index.jsx
index 95432f7825..f8c8248858 100644
--- a/react/Labs/CollectionField/index.jsx
+++ b/react/Labs/CollectionField/index.jsx
@@ -7,6 +7,9 @@ import Stack from '../../Stack'
 import Icon from '../../Icon'
 import { FieldContainer } from '../../Field'
 
+import CrossSmallIcon from 'cozy-ui/transpiled/react/Icons/CrossSmall'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+
 /**
  * Handles a collection of form fields.
  * This is a controlled component. You have to give it some values and handle
@@ -85,7 +88,9 @@ const CollectionField = props => {
                     label={removeButtonLabel}
                     iconOnly
                     round
-                    icon={<Icon icon="cross-small" color="var(--slateGrey)" />}
+                    icon={
+                      <Icon icon={CrossSmallIcon} color="var(--slateGrey)" />
+                    }
                     onClick={() => handleRemove(index)}
                   />
                 </div>
@@ -100,7 +105,7 @@ const CollectionField = props => {
             theme="text"
             icon={
               <Icon
-                icon="plus"
+                icon={PlusIcon}
                 className={styles.CollectionField__addBtnIcon}
               />
             }
diff --git a/react/Modal/ModalCross.jsx b/react/Modal/ModalCross.jsx
index da166f2b60..ae84c5b4b2 100644
--- a/react/Modal/ModalCross.jsx
+++ b/react/Modal/ModalCross.jsx
@@ -5,6 +5,8 @@ import Icon from '../Icon'
 import palette from '../palette'
 import withBreakpoints from '../helpers/withBreakpoints'
 
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+
 export const ModalCrossIcon = withBreakpoints()(props => {
   const {
     color,
@@ -12,7 +14,7 @@ export const ModalCrossIcon = withBreakpoints()(props => {
   } = props
   return (
     <Icon
-      icon="cross"
+      icon={CrossIcon}
       size={isMobile ? '16' : '24'}
       color={color || palette['coolGrey']}
     />
diff --git a/react/NestedSelect/Modal.jsx b/react/NestedSelect/Modal.jsx
index 09261b0ec1..24e2a054c8 100644
--- a/react/NestedSelect/Modal.jsx
+++ b/react/NestedSelect/Modal.jsx
@@ -10,11 +10,13 @@ import NestedSelect from './NestedSelect'
 
 import styles from './styles.styl'
 
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+
 const ModalTitle = ({ showBack, onClickBack, title }) => (
   <Media>
     {showBack && (
       <Img className={styles.Modal__back} onClick={onClickBack}>
-        <Icon icon="left" color={palette['coolGrey']} />
+        <Icon icon={LeftIcon} color={palette['coolGrey']} />
       </Img>
     )}
     <Bd>
diff --git a/react/NestedSelect/NestedSelect.jsx b/react/NestedSelect/NestedSelect.jsx
index a25043bb90..ca574086ba 100644
--- a/react/NestedSelect/NestedSelect.jsx
+++ b/react/NestedSelect/NestedSelect.jsx
@@ -8,6 +8,8 @@ import cx from 'classnames'
 import omit from 'lodash/omit'
 import palette from '../palette'
 
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 /**
  * Select like component to choose an option among a list of options.
  * Options can have children; selecting an option that has children
@@ -217,7 +219,7 @@ export const ItemRow = ({ item, onClick, isSelected, radioPosition }) => {
         onClick={() => onClick(item)}
         right={
           item.children && item.children.length > 0 ? (
-            <Icon icon="right" color={palette.coolGrey} />
+            <Icon icon={RightIcon} color={palette.coolGrey} />
           ) : radioPosition !== 'right' ? null : (
             <Radio
               readOnly
diff --git a/react/NestedSelect/Row.jsx b/react/NestedSelect/Row.jsx
index 22953be20f..d15fc36608 100644
--- a/react/NestedSelect/Row.jsx
+++ b/react/NestedSelect/Row.jsx
@@ -5,6 +5,8 @@ import { Media, Bd, Img } from '../Media'
 import Icon from '../Icon'
 import styles from './Row.styl'
 
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
 export const RowBody = ({ children }) => (
   <Bd className="u-ellipsis">{children}</Bd>
 )
@@ -32,7 +34,7 @@ const Row = ({
     {children}
     {hasArrow && (
       <Img>
-        <Icon icon="right" color="var(--coolGrey)" />
+        <Icon icon={RightIcon} color="var(--coolGrey)" />
       </Img>
     )}
   </Media>
diff --git a/react/PushClientBanner/index.jsx b/react/PushClientBanner/index.jsx
index 62efc9ad41..f87eeac3bb 100644
--- a/react/PushClientBanner/index.jsx
+++ b/react/PushClientBanner/index.jsx
@@ -8,6 +8,9 @@ import PropTypes from 'prop-types'
 import { Button, ButtonLink } from '../Button'
 import Icon from '../Icon'
 
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+
 const BannerClient = props => {
   const {
     text,
@@ -31,7 +34,7 @@ const BannerClient = props => {
       />
       <div className={styles['c-banner-text']}>
         <figure>
-          <Icon icon="cozy" width="44" height="44" />
+          <Icon icon={CozyIcon} width="44" height="44" />
         </figure>
         <span>{text}</span>
         <ButtonLink
@@ -47,7 +50,7 @@ const BannerClient = props => {
         extension="narrow"
         className={styles['close-banner']}
         onClick={onClick}
-        icon={<Icon icon="cross" width="24" height="24" />}
+        icon={<Icon icon={CrossIcon} width="24" height="24" />}
         iconOnly
         label="Close"
       />
diff --git a/react/PushClientButton/index.jsx b/react/PushClientButton/index.jsx
index f650a263a5..9fc260e212 100644
--- a/react/PushClientButton/index.jsx
+++ b/react/PushClientButton/index.jsx
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types'
 import cx from 'classnames'
 import Icon from '../Icon'
 
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+
 const ButtonClient = props => {
   const { label, href, onClick, className } = props
   return (
@@ -16,7 +18,7 @@ const ButtonClient = props => {
       onClick={onClick}
     >
       <figure>
-        <Icon icon="device-laptop" size="32" />
+        <Icon icon={DeviceLaptopIcon} size="32" />
       </figure>
       <span>{label}</span>
     </a>
diff --git a/react/SelectionBar/index.jsx b/react/SelectionBar/index.jsx
index cdedeb8bc9..f040f0cbee 100644
--- a/react/SelectionBar/index.jsx
+++ b/react/SelectionBar/index.jsx
@@ -6,6 +6,8 @@ import useBreakpoints from '../hooks/useBreakpoints'
 
 import styles from './styles.styl'
 
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+
 /*
 
 If you want use SelectionBar component, you must have `actions` parameter, like :
@@ -64,7 +66,7 @@ const SelectionBar = ({ actions, selected, hideSelectionBar }) => {
         onClick={hideSelectionBar}
         extension="narrow"
       >
-        <Icon icon="cross" />
+        <Icon icon={CrossIcon} />
       </Button>
     </div>
   )
diff --git a/react/Spinner/index.jsx b/react/Spinner/index.jsx
index 7d49b8fa89..d5447a7bf8 100644
--- a/react/Spinner/index.jsx
+++ b/react/Spinner/index.jsx
@@ -5,6 +5,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import styles from './styles.styl'
 import palette from '../palette'
+import SpinnerIcon from 'cozy-ui/transpiled/react/Icons/Spinner'
 export const Spinner = ({
   t,
   loadingType,
@@ -35,7 +36,7 @@ export const Spinner = ({
         className
       )}
     >
-      <Icon icon="spinner" color={color} spin={true} size={realsize} />
+      <Icon icon={SpinnerIcon} color={color} spin={true} size={realsize} />
       {loadingType && <p>{t(`loading.${loadingType}`)}</p>}
     </div>
   )
diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx
index 59c2636789..2af65e5281 100644
--- a/react/UploadQueue/index.jsx
+++ b/react/UploadQueue/index.jsx
@@ -18,6 +18,10 @@ import localeEn from './locales/en.json'
 import localeEs from './locales/es.json'
 import localeFr from './locales/fr.json'
 
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+import WarningIcon from 'cozy-ui/transpiled/react/Icons/Warning'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+
 const locales = {
   en: localeEn,
   es: localeEs,
@@ -108,17 +112,25 @@ const Item = translate()(
       ) : null
     } else if (statusToUse === CANCEL) {
       statusIcon = (
-        <Icon className="u-ml-half" icon="cross" color={palette['monza']} />
+        <Icon className="u-ml-half" icon={CrossIcon} color={palette['monza']} />
       )
     } else if (ERROR_STATUSES.includes(statusToUse)) {
       error = true
       statusIcon = (
-        <Icon className="u-ml-half" icon="warning" color={palette['monza']} />
+        <Icon
+          className="u-ml-half"
+          icon={WarningIcon}
+          color={palette['monza']}
+        />
       )
     } else if (DONE_STATUSES.includes(statusToUse)) {
       done = true
       statusIcon = (
-        <Icon className="u-ml-half" icon="check" color={palette['emerald']} />
+        <Icon
+          className="u-ml-half"
+          icon={CheckIcon}
+          color={palette['emerald']}
+        />
       )
     } else if (statusToUse === PENDING) {
       statusIcon = <Pending />
diff --git a/react/Viewer/AudioViewer.jsx b/react/Viewer/AudioViewer.jsx
index 9d3716b6b2..31824abc90 100644
--- a/react/Viewer/AudioViewer.jsx
+++ b/react/Viewer/AudioViewer.jsx
@@ -4,9 +4,11 @@ import Icon from '../Icon'
 import withFileUrl from './withFileUrl'
 import styles from './styles.styl'
 
+import FileTypeAudioIcon from 'cozy-ui/transpiled/react/Icons/FileTypeAudio'
+
 const AudioViewer = ({ file, url }) => (
   <div className={styles['viewer-audioviewer']}>
-    <Icon icon="file-type-audio" width={160} height={140} />
+    <Icon icon={FileTypeAudioIcon} width={160} height={140} />
     <p className={styles['viewer-filename']}>{file.name}</p>
     <audio src={url} controls="controls" />
   </div>
diff --git a/react/Viewer/NoNetworkViewer.jsx b/react/Viewer/NoNetworkViewer.jsx
index cd39e4cccd..0fb1f0de2a 100644
--- a/react/Viewer/NoNetworkViewer.jsx
+++ b/react/Viewer/NoNetworkViewer.jsx
@@ -5,9 +5,11 @@ import { translate } from '../I18n'
 
 import styles from './styles.styl'
 
+import CloudBrokenIcon from 'cozy-ui/transpiled/react/Icons/CloudBroken'
+
 const NoNetworkViewer = ({ t, onReload }) => (
   <div className={styles['viewer-canceled']}>
-    <Icon icon="cloud-broken" width={160} height={140} />
+    <Icon icon={CloudBrokenIcon} width={160} height={140} />
     <h2>{t('Viewer.error')}</h2>
     <Button onClick={onReload} label={t('Viewer.retry')} />
   </div>
diff --git a/react/Viewer/ViewerControls.jsx b/react/Viewer/ViewerControls.jsx
index 5a3b4693b5..c09b0d0e71 100644
--- a/react/Viewer/ViewerControls.jsx
+++ b/react/Viewer/ViewerControls.jsx
@@ -10,6 +10,9 @@ import Icon from '../Icon'
 
 import styles from './styles.styl'
 
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
+import NextIcon from 'cozy-ui/transpiled/react/Icons/Next'
+
 const ACTIONS_HIDE_DELAY = 3000
 
 class ViewerControls extends Component {
@@ -155,7 +158,7 @@ class ViewerControls extends Component {
             onMouseLeave={this.hideControls}
           >
             <Icon
-              icon="previous"
+              icon={PreviousIcon}
               size="24"
               className={styles['viewer-nav-arrow']}
             />
@@ -177,7 +180,7 @@ class ViewerControls extends Component {
             onMouseLeave={this.hideControls}
           >
             <Icon
-              icon="next"
+              icon={NextIcon}
               size="24"
               className={styles['viewer-nav-arrow']}
             />
diff --git a/react/Wizard/index.jsx b/react/Wizard/index.jsx
index db3a97d4b8..bf0731c4d6 100644
--- a/react/Wizard/index.jsx
+++ b/react/Wizard/index.jsx
@@ -8,6 +8,8 @@ import Input from 'cozy-ui/transpiled/react/Input'
 
 import styles from './styles.styl'
 
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+
 export const Wizard = ({ children, tag, ...props }) => {
   const Component = tag || 'div'
   return (
@@ -75,7 +77,7 @@ export const WizardLogo = ({ src, badgeIcon, badgeColor }) => (
       focusable="false"
     />
     <div className={styles['wizard-logo-badge']}>
-      <Icon icon="cloud" width={badgeIcon} height="20" color={badgeColor} />
+      <Icon icon={CloudIcon} width={badgeIcon} height="20" color={badgeColor} />
     </div>
   </div>
 )
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index 61c5524685..6ccf5b916d 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -2,8 +2,8 @@
 
 exports[`ActionMenu should render examples: ActionMenu 1`] = `
 "<div>
-  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
-        <use xlink:href=\\"#bottom\\"></use>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg viewBox=\\"0 0 24 24\\" class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></button>
     <div>
       <div style=\\"position: absolute; left: 0px; top: 0px; z-index: #fff; transform: translate(0px, 0px);\\" data-popper-reference-hidden=\\"true\\" data-popper-escaped=\\"true\\" data-popper-placement=\\"bottom-start\\">
@@ -39,8 +39,8 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 2`] = `
 "<div>
-  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
-        <use xlink:href=\\"#bottom\\"></use>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg viewBox=\\"0 0 24 24\\" class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></button>
     <div>
       <div style=\\"position: absolute; left: 0px; top: 0px; z-index: #fff; transform: translate(0px, 0px);\\" data-popper-reference-hidden=\\"true\\" data-popper-escaped=\\"true\\" data-popper-placement=\\"bottom-start\\">
@@ -72,8 +72,8 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 3`] = `
 "<div>
-  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
-        <use xlink:href=\\"#bottom\\"></use>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg viewBox=\\"0 0 24 24\\" class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></button>
     <div>
       <div style=\\"position: absolute; left: 0px; top: 0px; z-index: #fff; transform: translate(0px, 0px);\\" data-popper-reference-hidden=\\"true\\" data-popper-escaped=\\"true\\" data-popper-placement=\\"bottom-start\\">
@@ -93,8 +93,8 @@ exports[`ActionMenu should render examples: ActionMenu 3`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 4`] = `
 "<div>
-  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
-        <use xlink:href=\\"#bottom\\"></use>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg viewBox=\\"0 0 24 24\\" class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></button>
     <div>
       <div style=\\"position: absolute; left: 0px; top: 0px; z-index: #fff; transform: translate(0px, 0px);\\" data-popper-reference-hidden=\\"true\\" data-popper-escaped=\\"true\\" data-popper-placement=\\"bottom-end\\">
@@ -114,8 +114,8 @@ exports[`ActionMenu should render examples: ActionMenu 4`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 5`] = `
 "<div>
-  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
-        <use xlink:href=\\"#bottom\\"></use>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg viewBox=\\"0 0 24 24\\" class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></button>
     <div>
       <div style=\\"position: absolute; left: 0px; top: 0px; z-index: #fff; transform: translate(0px, 0px);\\" data-popper-reference-hidden=\\"true\\" data-popper-escaped=\\"true\\" data-popper-placement=\\"bottom-end\\">
@@ -141,8 +141,8 @@ exports[`AppTitle should render examples: AppTitle 1`] = `
 
 exports[`Avatar should render examples: Avatar 1`] = `
 "<div>
-  <div class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#people\\"></use>
+  <div class=\\"styles__c-avatar___PpDI-\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
     </svg></div>
 </div>"
 `;
@@ -162,8 +162,8 @@ exports[`Avatar should render examples: Avatar 3`] = `
 exports[`Avatar should render examples: Avatar 4`] = `
 "<div>
   <div class=\\"u-flex\\">
-    <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--disabled___xoLOy\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#people\\"></use>
+    <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--disabled___xoLOy\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+        <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
       </svg></div>
     <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna styles__c-avatar--disabled___xoLOy\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
     <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci styles__c-avatar--disabled___xoLOy\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
@@ -175,36 +175,36 @@ exports[`Avatar should render examples: Avatar 5`] = `
 "<div>
   <div>
     <div class=\\"u-flex\\">
-      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#people\\"></use>
+      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io styles__c-avatar--text___2dvna\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io styles__c-avatar--image___jDBci\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
     <div class=\\"u-flex\\">
-      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#people\\"></use>
+      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv styles__c-avatar--text___2dvna\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv styles__c-avatar--image___jDBci\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
     <div class=\\"u-flex\\">
-      <div class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#people\\"></use>
+      <div class=\\"styles__c-avatar___PpDI-\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
     <div class=\\"u-flex\\">
-      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#people\\"></use>
+      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ styles__c-avatar--text___2dvna\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ styles__c-avatar--image___jDBci\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
     <div class=\\"u-flex\\">
-      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xlarge___3Qe0b\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#people\\"></use>
+      <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xlarge___3Qe0b\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xlarge___3Qe0b styles__c-avatar--text___2dvna\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xlarge___3Qe0b styles__c-avatar--image___jDBci\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
@@ -264,29 +264,37 @@ exports[`BarButton should render examples: BarButton 4`] = `
 exports[`Button should render examples: Button 1`] = `
 "<div>
   <div>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--regular___2HUly styles__c-btn--center___16_Xh\\"><span><span>regular</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--regular___2HUly styles__c-btn--center___16_Xh\\"><span><span>regular</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--regular___2HUly styles__c-btn--center___16_Xh\\"><span><span>regular</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--regular___2HUly styles__c-btn--center___16_Xh\\"><span><span>regular</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--regular___2HUly styles__c-btn--center___16_Xh\\"><span><span>regular</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--regular___2HUly styles__c-btn--center___16_Xh\\"><span><span>regular</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--ghost___1HC3L styles__c-btn--center___16_Xh\\"><span><span>ghost</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--ghost___1HC3L styles__c-btn--center___16_Xh\\"><span><span>ghost</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--ghost___1HC3L styles__c-btn--center___16_Xh\\"><span><span>ghost</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--ghost___1HC3L styles__c-btn--center___16_Xh\\"><span><span>ghost</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--ghost___1HC3L styles__c-btn--center___16_Xh\\"><span><span>ghost</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--ghost___1HC3L styles__c-btn--center___16_Xh\\"><span><span>ghost</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>danger</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>danger</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>danger</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>danger</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>danger</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>danger</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--center___16_Xh\\"><span><span>highlight</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--center___16_Xh\\"><span><span>highlight</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--center___16_Xh\\"><span><span>highlight</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--center___16_Xh\\"><span><span>highlight</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--center___16_Xh\\"><span><span>highlight</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--center___16_Xh\\"><span><span>highlight</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh\\"><span><span>secondary</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh\\"><span><span>secondary</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh\\"><span><span>secondary</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh\\"><span><span>secondary</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh\\"><span><span>secondary</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh\\"><span><span>secondary</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>danger-outline</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>danger-outline</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>danger-outline</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>danger-outline</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>danger-outline</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>danger-outline</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--alpha___2ECZi styles__c-btn--center___16_Xh\\"><span><span>alpha</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--alpha___2ECZi styles__c-btn--center___16_Xh\\"><span><span>alpha</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--alpha___2ECZi styles__c-btn--center___16_Xh\\"><span><span>alpha</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--alpha___2ECZi styles__c-btn--center___16_Xh\\"><span><span>alpha</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--alpha___2ECZi styles__c-btn--center___16_Xh\\"><span><span>alpha</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--alpha___2ECZi styles__c-btn--center___16_Xh\\"><span><span>alpha</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>text</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>text</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>text</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>text</span></span></button><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>text</span></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>text</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
   </div>
 </div>"
@@ -332,8 +340,9 @@ exports[`Button should render examples: Button 5`] = `
 exports[`Button should render examples: Button 6`] = `"<div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger-outline___1mO1B styles__c-btn--center___16_Xh\\"><span><span>Show alert</span></span></button></div>"`;
 
 exports[`Button should render examples: Button 7`] = `
-"<div><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>Loading</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-      <use xlink:href=\\"#spinner\\"></use>
+"<div><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>Loading</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+      <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+      <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
     </svg></span></button></div>"
 `;
 
@@ -369,14 +378,18 @@ exports[`Button should render examples: Button 13`] = `
     <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--tiny___1pFv6 styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"8\\" height=\\"8\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Tiny text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--small___3ArkI styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Small text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Regular text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"18\\" height=\\"18\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Large text</span></span></button></p>
     <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Secondary theme</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Highlight theme</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>DANGER theme</span></span></button></p>
     <p><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Disabled</span></span></button></p>
-    <p><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
-        </svg></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy secondary</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
-        </svg></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy highlight</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
-        </svg></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy danger</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
-          <use xlink:href=\\"#spinner\\"></use>
+    <p><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+        </svg></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy secondary</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+        </svg></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy highlight</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+        </svg></span></button><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy danger</span><svg viewBox=\\"0 0 32 32\\" class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">
+          <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+          <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
         </svg></span></button></p>
     <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#cozy\\"></use></svg><span>Cozy</span></span></button></p>
     <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Subtle Secondary Cozy</span></span></button></p>
@@ -2068,11 +2081,11 @@ exports[`ContactsListModal should render examples: ContactsListModal 1`] = `"<di
 exports[`DateMonthPicker should render examples: DateMonthPicker 1`] = `
 "<div>
   <div>
-    <div class=\\"styles__DateMonthPicker__YearControls___1DGlB\\"><button class=\\"styles__DateMonthPicker__YearButton___3zNDK\\" title=\\"2018\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#left\\"></use>
+    <div class=\\"styles__DateMonthPicker__YearControls___1DGlB\\"><button class=\\"styles__DateMonthPicker__YearButton___3zNDK\\" title=\\"2018\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M10.707 2.707a.999.999 0 10-1.414-1.414l-6 6a.999.999 0 000 1.414l6 6a.999.999 0 101.414-1.414L5.414 8l5.293-5.293z\\"></path>
         </svg></button>
-      <div class=\\"styles__DateMonthPicker__Year___387bP\\">2019</div><button class=\\"styles__DateMonthPicker__YearButton___3zNDK\\" title=\\"2020\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#right\\"></use>
+      <div class=\\"styles__DateMonthPicker__Year___387bP\\">2019</div><button class=\\"styles__DateMonthPicker__YearButton___3zNDK\\" title=\\"2020\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
         </svg></button>
     </div>
     <div class=\\"styles__DateMonthPicker__MonthGrid___TCFg4\\"><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Jan</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Feb</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Mar</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Apr</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">May</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Jun</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Jul</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm styles__DateMonthPicker__MonthButton--selected___40hCm\\">Aug</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Sep</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Oct</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Nov</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Dec</button></div>
@@ -2331,8 +2344,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:12</div>
             <div class=\\"u-title-h3\\">Current Version</div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">10ko</div>
@@ -2352,8 +2365,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:10</div>
             <div class=\\"u-title-h3\\"></div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">9ko</div>
@@ -2373,8 +2386,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:09</div>
             <div class=\\"u-title-h3\\">V2</div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">9ko</div>
@@ -2394,8 +2407,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:07</div>
             <div class=\\"u-title-h3\\"></div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">9ko</div>
@@ -2415,8 +2428,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:05</div>
             <div class=\\"u-title-h3\\"></div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">9ko</div>
@@ -2436,8 +2449,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:04</div>
             <div class=\\"u-title-h3\\"></div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">9ko</div>
@@ -2457,8 +2470,8 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
             <div class=\\"u-title-h4\\">12/12/12 12:03</div>
             <div class=\\"u-title-h3\\">V1</div>
           </div>
-          <div class=\\"styles__img___3SHpG\\"><svg class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#download\\"></use>
+          <div class=\\"styles__img___3SHpG\\"><svg viewBox=\\"0 0 16 16\\" class=\\"u-c-pointer styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+              <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
             </svg></div>
         </div>
         <div class=\\"u-caption\\">9ko</div>
@@ -6306,8 +6319,8 @@ exports[`Infos should render examples: Infos 1`] = `
           </div>
         </div>
         <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>one</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>two</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>three</span></span></button></div>
-      </div><button class=\\"styles__Info-close___1RVQP\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#cross\\"></use>
+      </div><button class=\\"styles__Info-close___1RVQP\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z\\"></path>
         </svg></button>
     </div>
   </div>
@@ -6348,10 +6361,10 @@ exports[`InfosCarrousel should render examples: InfosCarrousel 1`] = `
           </div>
         </div>
       </div>
-      <div class=\\"styles__InfosCarrousel-navigation___3s_hu\\"><button class=\\"styles__IconButton___1LWwV\\" disabled=\\"\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-            <use xlink:href=\\"#left\\"></use>
-          </svg></button><span class=\\"styles__InfosCarrousel-separator___AvH5m\\"></span><button class=\\"styles__IconButton___1LWwV\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-            <use xlink:href=\\"#right\\"></use>
+      <div class=\\"styles__InfosCarrousel-navigation___3s_hu\\"><button class=\\"styles__IconButton___1LWwV\\" disabled=\\"\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+            <path fill-rule=\\"evenodd\\" d=\\"M10.707 2.707a.999.999 0 10-1.414-1.414l-6 6a.999.999 0 000 1.414l6 6a.999.999 0 101.414-1.414L5.414 8l5.293-5.293z\\"></path>
+          </svg></button><span class=\\"styles__InfosCarrousel-separator___AvH5m\\"></span><button class=\\"styles__IconButton___1LWwV\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+            <path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
           </svg></button></div>
     </div>
   </div>
@@ -6533,8 +6546,8 @@ exports[`Labs/CollectionField should render examples: Labs/CollectionField 1`] =
   <div class=\\"styles__o-field___3n5HM\\"><label class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Contacts</label>
     <div class=\\"styles__Stack--m___1tSpV\\">
       <div class=\\"styles__Stack--s___22WMg\\">
-        <div class=\\"styles__CollectionField__row___Z7bbf\\"><button type=\\"button\\" class=\\"styles__SelectControl___2OxoO\\">isabelle.durand@cozycloud.cc</button><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Remove this contact\\"><span><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#cross-small\\"></use></svg><span class=\\"u-visuallyhidden\\">Remove this contact</span></span></button></div>
-      </div><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh styles__CollectionField__addBtn___Z0FO-\\"><span><svg class=\\"styles__CollectionField__addBtnIcon___1hA5b styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#plus\\"></use></svg><span>Add a contact</span></span></button>
+        <div class=\\"styles__CollectionField__row___Z7bbf\\"><button type=\\"button\\" class=\\"styles__SelectControl___2OxoO\\">isabelle.durand@cozycloud.cc</button><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Remove this contact\\"><span><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"16\\" height=\\"16\\"><path d=\\"M6 4.59l2.3-2.3a1 1 0 011.4 1.42L7.42 6l2.3 2.3A1 1 0 118.3 9.7L6 7.42l-2.3 2.3A1 1 0 112.3 8.3L4.58 6l-2.3-2.3A1 1 0 013.7 2.3L6 4.58z\\"></path></svg><span class=\\"u-visuallyhidden\\">Remove this contact</span></span></button></div>
+      </div><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh styles__CollectionField__addBtn___Z0FO-\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__CollectionField__addBtnIcon___1hA5b styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg><span>Add a contact</span></span></button>
     </div>
   </div>
 </div>"
@@ -7161,24 +7174,30 @@ exports[`Sidebar should render examples: Sidebar 1`] = `
 
 exports[`Spinner should render examples: Spinner 1`] = `
 "<div>
-  <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#spinner\\"></use>
+  <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
+      <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+      <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
     </svg></div>
 </div>"
 `;
 
 exports[`Spinner should render examples: Spinner 2`] = `
 "<div>
-  <div>blue (default): <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div> or <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: blue;\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div>grey: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: grey;\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div>white: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: white;\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div>red: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: red;\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
+  <div>blue (default): <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div> or <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: blue;\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div>grey: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: grey;\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div>white: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: white;\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div>red: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: red;\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
       </svg></div>
   </div>
 </div>"
@@ -7187,8 +7206,9 @@ exports[`Spinner should render examples: Spinner 2`] = `
 exports[`Spinner should render examples: Spinner 3`] = `
 "<div>
   <div>
-    <div class=\\"styles__c-spinner___1snK7 styles__c-spinner--nomargin___13JyW\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
+    <div class=\\"styles__c-spinner___1snK7 styles__c-spinner--nomargin___13JyW\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
       </svg></div>
   </div>
 </div>"
@@ -7196,20 +7216,27 @@ exports[`Spinner should render examples: Spinner 3`] = `
 
 exports[`Spinner should render examples: Spinner 4`] = `
 "<div>
-  <div>tiny: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"8\\" height=\\"8\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div><br>small: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"12\\" height=\\"12\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div><br>medium (default): <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div> or <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div><br>large: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"24\\" height=\\"24\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div><br>xlarge: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"36\\" height=\\"36\\">
-        <use xlink:href=\\"#spinner\\"></use>
-      </svg></div><br>xxlarge: <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"80\\" height=\\"80\\">
-        <use xlink:href=\\"#spinner\\"></use>
+  <div>tiny: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"8\\" height=\\"8\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div><br>small: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"12\\" height=\\"12\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div><br>medium (default): <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div> or <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"16\\" height=\\"16\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div><br>large: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"24\\" height=\\"24\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div><br>xlarge: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"36\\" height=\\"36\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
+      </svg></div><br>xxlarge: <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"80\\" height=\\"80\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
       </svg></div>
   </div>
 </div>"
@@ -7218,8 +7245,9 @@ exports[`Spinner should render examples: Spinner 4`] = `
 exports[`Spinner should render examples: Spinner 5`] = `
 "<div>
   <div>
-    <div class=\\"styles__c-spinner___1snK7\\"><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"80\\" height=\\"80\\">
-        <use xlink:href=\\"#spinner\\"></use>
+    <div class=\\"styles__c-spinner___1snK7\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: var(--primaryColor);\\" width=\\"80\\" height=\\"80\\">
+        <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
+        <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
       </svg>
       <p>Hello world !</p>
     </div>