From 47370b910d41f7535792bd6ac13f78a6d4be34d7 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 08:19:20 +0100
Subject: [PATCH 1/8] feat: Use svgr icons

---
 react/ContactsListModal/AddContactButton.jsx | 4 +++-
 react/ContactsListModal/index.jsx            | 3 ++-
 react/Modal/ModalBackButton.jsx              | 4 +++-
 react/SelectBox/SelectBox.jsx                | 5 +++--
 react/Viewer/ShortcutViewer.jsx              | 3 ++-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/react/ContactsListModal/AddContactButton.jsx b/react/ContactsListModal/AddContactButton.jsx
index 57dbdce325..d7f8f43631 100644
--- a/react/ContactsListModal/AddContactButton.jsx
+++ b/react/ContactsListModal/AddContactButton.jsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import { withClient, models, queryConnect, Q } from 'cozy-client'
+
 import AppLinker from '../AppLinker'
 import { ButtonLink } from '../Button'
 import compose from 'lodash/flowRight'
 import useRealtime from '../hooks/useRealtime'
 import useEventListener from '../hooks/useEventListener.js'
+import PlusIcon from '../Icons/Plus'
 
 const DumbAddContactButton = props => {
   const { client, apps, ...rest } = props
@@ -45,7 +47,7 @@ const DumbAddContactButton = props => {
         <ButtonLink
           href={href}
           onClick={onClick}
-          icon="plus"
+          icon={PlusIcon}
           theme="secondary"
           target="_blank"
           {...rest}
diff --git a/react/ContactsListModal/index.jsx b/react/ContactsListModal/index.jsx
index 9f06c6ed52..86c1fb4f77 100644
--- a/react/ContactsListModal/index.jsx
+++ b/react/ContactsListModal/index.jsx
@@ -14,6 +14,7 @@ import EmptyMessage from './EmptyMessage'
 import compose from 'lodash/flowRight'
 import useRealtime from '../hooks/useRealtime'
 import useEventListener from '../hooks/useEventListener.js'
+import PreviousIcon from '../Icons/Previous'
 
 const thirtySeconds = 30000
 const olderThan30s = fetchPolicies.olderThan(thirtySeconds)
@@ -94,7 +95,7 @@ const ContactsListModal = props => {
             onClick={rest.dismissAction}
             extension="narrow"
             iconOnly
-            icon="previous"
+            icon={PreviousIcon}
             theme="primary"
           />
         )}
diff --git a/react/Modal/ModalBackButton.jsx b/react/Modal/ModalBackButton.jsx
index 6724e1b18e..0efce86a3f 100644
--- a/react/Modal/ModalBackButton.jsx
+++ b/react/Modal/ModalBackButton.jsx
@@ -4,6 +4,8 @@ import { Button } from '../Button'
 import withBreakpoints from '../helpers/withBreakpoints'
 import styles from './styles.styl'
 
+import PreviousIcon from '../Icons/Previous'
+
 const DumbModalBackButton = props => {
   const {
     breakpoints: { isMobile },
@@ -13,7 +15,7 @@ const DumbModalBackButton = props => {
 
   return (
     <Button
-      icon="previous"
+      icon={PreviousIcon}
       iconOnly
       extension="narrow"
       theme="text"
diff --git a/react/SelectBox/SelectBox.jsx b/react/SelectBox/SelectBox.jsx
index fdc8e04731..2e8d8b3f70 100644
--- a/react/SelectBox/SelectBox.jsx
+++ b/react/SelectBox/SelectBox.jsx
@@ -5,11 +5,12 @@ import classNames from 'classnames'
 
 import { isIOSApp } from 'cozy-device-helper'
 
-import styles from './styles.styl'
 import Icon from '../Icon'
+import CheckIcon from '../Icons/Check'
 import { dodgerBlue, silver, coolGrey, paleGrey } from '../palette'
 import withBreakpoints from '../helpers/withBreakpoints'
 
+import styles from './styles.styl'
 import ControlDefault from './ControlDefault'
 
 const heights = {
@@ -174,7 +175,7 @@ const Option = ({
       <span className={withPrefix(cx, styles['select-option__checkmark'])}>
         {isSelected && (
           <Icon
-            icon="check"
+            icon={CheckIcon}
             color={dodgerBlue}
             className={withPrefix(cx, 'u-ph-half')}
           />
diff --git a/react/Viewer/ShortcutViewer.jsx b/react/Viewer/ShortcutViewer.jsx
index ac1190b682..74ddb858e5 100644
--- a/react/Viewer/ShortcutViewer.jsx
+++ b/react/Viewer/ShortcutViewer.jsx
@@ -6,6 +6,7 @@ import { withViewerLocales } from './withViewerLocales'
 import { ButtonLink } from '../Button'
 import NoViewer from './NoViewer'
 import { FileDoctype } from '../proptypes'
+import OpenwithIcon from '../Icons/Openwith'
 
 const ShortcutViewer = ({ t, file }) => {
   const client = useClient()
@@ -20,7 +21,7 @@ const ShortcutViewer = ({ t, file }) => {
       renderFallbackExtraContent={() => (
         <ButtonLink
           label={`${t('Viewer.goto', { url: get(url, 'origin', '') })}`}
-          icon="openwith"
+          icon={OpenwithIcon}
           href={`${get(url, 'origin', '')}`}
           target="_blank"
         />

From 0b5fa4a3765dc14dc5c896c8ee0bc91518c5ea45 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 08:21:52 +0100
Subject: [PATCH 2/8] feat: Use svgr icons in examples

---
 react/ActionMenu/Readme.md                  | 28 ++++--
 react/Avatar/Readme.md                      | 32 ++++---
 react/Badge/Readme.md                       |  8 +-
 react/Banner/Readme.md                      |  4 +-
 react/Button/Readme.md                      | 32 ++++---
 react/Chip/Readme.md                        | 18 ++--
 react/CompositeRow/Readme.md                |  7 +-
 react/CozyDialogs/Readme.md                 |  4 +-
 react/Dialog/Readme.md                      |  8 +-
 react/FileInput/Readme.md                   |  3 +-
 react/GhostFileBadge/Readme.md              |  4 +-
 react/Hero/Readme.md                        | 10 ++-
 react/Icon/Readme.md                        |  9 +-
 react/IconStack/Readme.md                   |  6 +-
 react/InfosBadge/Readme.md                  |  7 +-
 react/Labs/IconGrid/Readme.md               | 12 ++-
 react/Media/Readme.md                       | 11 ++-
 react/Menu/Readme.md                        |  3 +-
 react/MuiCozyTheme/ExpansionPanel/Readme.md |  4 +-
 react/MuiCozyTheme/List/Readme.md           |  6 +-
 react/MuiCozyTheme/Menus/Readme.md          |  4 +-
 react/NavigationList/Readme.md              | 26 +++---
 react/Wizard/Readme.md                      | 94 +++++++++++----------
 23 files changed, 214 insertions(+), 126 deletions(-)

diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
index f753203ebb..bd2b2cfc9b 100644
--- a/react/ActionMenu/Readme.md
+++ b/react/ActionMenu/Readme.md
@@ -10,6 +10,9 @@ import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Typography from "cozy-ui/transpiled/react/Typography";
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
+
 class ExempleMenu extends React.Component {
   constructor(props){
     super(props);
@@ -35,9 +38,9 @@ class ExempleMenu extends React.Component {
         anchorElRef={this.ref}
         autoclose={true}
         onClose={this.hideMenu}>
-        <ActionMenuItem left={<Icon icon='file' />} right={<Icon icon='warning' color="var(--errorColor)" />}>Item 1</ActionMenuItem>
+        <ActionMenuItem left={<Icon icon={FileIcon} />} right={<Icon icon={WarningIcon} color="var(--errorColor)" />}>Item 1</ActionMenuItem>
         <ActionMenuItem left={<ActionMenuRadio />}>Item 2</ActionMenuItem>
-        <ActionMenuItem left={<Icon icon='file' />}>
+        <ActionMenuItem left={<Icon icon={FileIcon} />}>
           <Typography variant="body1" gutterBottom>
             Item 3
           </Typography>
@@ -66,6 +69,9 @@ import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
+
 initialState = { menuDisplayed: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -79,9 +85,9 @@ const hideMenu = () => setState({ menuDisplayed: false });
       <ActionMenuHeader>
         <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
       </ActionMenuHeader>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 1</ActionMenuItem>
-      <ActionMenuItem left={<Icon icon='right' />}>Item 2</ActionMenuItem>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 3</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={RightIcon} />}>Item 2</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 3</ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
@@ -94,6 +100,8 @@ import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+
 initialState = { menuDisplayed: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -107,7 +115,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
       <ActionMenuHeader>
         <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
       </ActionMenuHeader>
-      <ActionMenuItem onClick={() => alert('click')}left={<Icon icon='file' />}>Item 1</ActionMenuItem>
+      <ActionMenuItem onClick={() => alert('click')}left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
@@ -121,6 +129,8 @@ import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+
 initialState = { menuDisplayed: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -135,7 +145,7 @@ const anchorRef = React.createRef();
       anchorElRef={anchorRef}
       popperOptions={{ placement: 'bottom-end'}}
       onClose={hideMenu}>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 1</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
@@ -153,6 +163,8 @@ import {
 } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import Button from 'cozy-ui/transpiled/react/Button'
 
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+
 initialState = { menuDisplayed: isTesting(),  modalOpened: isTesting() };
 
 const showMenu = () => setState({ menuDisplayed: true });
@@ -171,7 +183,7 @@ const onClose = () => setState({ modalOpened: !state.modalOpened });
           popperOptions={{ placement: 'bottom-end'}}
           onClose={hideMenu}>
             <ActionMenuItem
-              left={<Icon icon='file' />}
+              left={<Icon icon={FileIcon} />}
               onClick={() => setState({ modalOpened: !state.modalOpened })}>
                 Item 1
             </ActionMenuItem>
diff --git a/react/Avatar/Readme.md b/react/Avatar/Readme.md
index 5bf9e65ab7..14e0052578 100644
--- a/react/Avatar/Readme.md
+++ b/react/Avatar/Readme.md
@@ -3,15 +3,18 @@
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
-import Icon from 'cozy-ui/transpiled/react/Icon'; 
+import Icon from 'cozy-ui/transpiled/react/Icon';
+
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
 
 <div className="u-flex">
   <Avatar />
   <Avatar text="CD" />
   <Avatar image={cozyLogo} />
-  <Avatar icon="link" />
+  <Avatar icon={LinkIcon} />
   <Avatar text="CD" style={{color: 'black', backgroundColor: 'var(--seafoamGreen)' }} />
-  <Avatar icon={<Icon icon='warning' />} />
+  <Avatar icon={<Icon icon={WarningIcon} />} />
 </div>
 ```
 
@@ -21,11 +24,13 @@ import Icon from 'cozy-ui/transpiled/react/Icon';
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+
 <div className="u-flex">
   <Avatar disabled />
   <Avatar text="CD" disabled />
   <Avatar image={cozyLogo} disabled />
-  <Avatar icon="link" disabled />
+  <Avatar icon={LinkIcon} disabled />
   <Avatar text="CD" disabled style={{color: 'black', backgroundColor: 'var(--seafoamGreen)' }} />
 </div>
 ```
@@ -35,6 +40,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar';
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
 const style={
   marginLeft: '-1rem'
 };
@@ -43,11 +49,11 @@ const style={
   <Avatar style={style} />
   <Avatar text="CD" style={style} />
   <Avatar image={cozyLogo} style={style} />
-  <Avatar icon="link" style={style} />
+  <Avatar icon={LinkIcon} style={style} />
   <Avatar disabled style={style} />
   <Avatar text="CD" disabled style={style} />
   <Avatar image={cozyLogo} disabled style={style} />
-  <Avatar icon="link" disabled style={style}/>
+  <Avatar icon={LinkIcon} disabled style={style}/>
 </div>
 ```
 
@@ -59,43 +65,45 @@ The size can also be specifically defined using a number of pixels.
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+
 <div>
   <div className="u-flex">
     <Avatar size="xsmall" />
     <Avatar text="CD" size="xsmall" />
     <Avatar image={cozyLogo} size="xsmall" />
-    <Avatar icon="link" size="xsmall" />
+    <Avatar icon={LinkIcon} size="xsmall" />
   </div>
   <div className="u-flex">
     <Avatar size="small" />
     <Avatar text="CD" size="small" />
     <Avatar image={cozyLogo} size="small" />
-    <Avatar icon="link" size="small" />
+    <Avatar icon={LinkIcon} size="small" />
   </div>
   <div className="u-flex">
     <Avatar size="medium" />
     <Avatar text="CD" size="medium" />
     <Avatar image={cozyLogo} size="medium" />
-    <Avatar icon="link" size="medium" />
+    <Avatar icon={LinkIcon} size="medium" />
   </div>
   <div className="u-flex">
     <Avatar size="large" />
     <Avatar text="CD" size="large" />
     <Avatar image={cozyLogo} size="large" />
-    <Avatar icon="link" size="large" />
+    <Avatar icon={LinkIcon} size="large" />
   </div>
   <div className="u-flex">
     <Avatar size="xlarge" />
     <Avatar text="CD" size="xlarge" />
     <Avatar image={cozyLogo} size="xlarge" />
-    <Avatar icon="link" size="xlarge" />
+    <Avatar icon={LinkIcon} size="xlarge" />
   </div>
   <hr />
   <div className="u-flex">
     <Avatar size={24} />
     <Avatar text="CD" size={24} />
     <Avatar image={cozyLogo} size={24} />
-    <Avatar icon="link" size={24} />
+    <Avatar icon={LinkIcon} size={24} />
   </div>
 </div>
 ```
diff --git a/react/Badge/Readme.md b/react/Badge/Readme.md
index 24f391b483..32cfa7fed9 100644
--- a/react/Badge/Readme.md
+++ b/react/Badge/Readme.md
@@ -11,6 +11,8 @@ import Badge from 'cozy-ui/transpiled/react/Badge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Variants from 'cozy-ui/docs/components/Variants';
 
+import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled";
+
 const initialVariants = [
   { error: false, dot: false, large: false, small: false },
   { error: true, dot: true, large: false, small: false },
@@ -22,7 +24,7 @@ const initialVariants = [
   variant => (
     <p>
       <Badge badgeContent={4} color={variant.error ? 'error' : variant.secondaryColor ? 'secondary' : 'primary'} variant={variant.dot ? 'dot' : 'standard'} size={variant.large ? 'large' : variant.small ? 'small' : 'medium'} anchorOrigin={{vertical: variant.bottom ? 'bottom' : 'top', 'horizontal': variant.left ? 'left' : 'right'}}>
-        <Icon icon="circle-filled" size={variant.large ? '32' : variant.small ? '16' : '24'} color="var(--slateGrey)" />
+        <Icon icon={CircleFilledIcon} size={variant.large ? '32' : variant.small ? '16' : '24'} color="var(--slateGrey)" />
       </Badge>
     </p>
   )
@@ -39,11 +41,13 @@ import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+
 <p>
   <InfosBadge
     badgeContent={
       <Badge color="error" variant="dot" size="small">
-        <Icon icon="link" size="10" />
+        <Icon icon={LinkIcon} size="10" />
       </Badge>
     }
   >
diff --git a/react/Banner/Readme.md b/react/Banner/Readme.md
index c7d169661d..06078cc4cb 100644
--- a/react/Banner/Readme.md
+++ b/react/Banner/Readme.md
@@ -12,6 +12,8 @@ import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 
+import DownloadIcon from "cozy-ui/transpiled/react/Icons/Download";
+
 const shortText = "You have lost connection to the internet."
 const longText = "You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text. You have lost connection to the internet. This app is offline. And this is a long text to show how it reacts, with, well, a long text."
 const buttonOne = <Button theme="text" label="Turn on wifi" />
@@ -37,7 +39,7 @@ const initialVariants = [
     icon={<Icon icon={DeviceLaptopIcon} />}
     text="Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times"
     bgcolor={palette['paleGrey']}
-    buttonOne={<Button theme="text" icon='download' label="Download" onClick={() => alert("Clicked!")} />}
+    buttonOne={<Button theme="text" icon={DownloadIcon} label="Download" onClick={() => alert("Clicked!")} />}
     buttonTwo={<Button theme="text" label="No, thanks!" />}
     inline
   /></>
diff --git a/react/Button/Readme.md b/react/Button/Readme.md
index 66bc441ef6..512d1ee2e9 100644
--- a/react/Button/Readme.md
+++ b/react/Button/Readme.md
@@ -123,9 +123,11 @@ If you want a button with only an icon as content, you must set the `iconOnly` p
 
 ```
 import Button from 'cozy-ui/transpiled/react/Button';
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 <div>
-  <Button theme="danger" icon='trash' label='delete' />
-  <Button theme="secondary" icon='dots' iconOnly label="See more" extension='narrow' />
+  <Button theme="danger" icon={TrashIcon} label='delete' />
+  <Button theme="secondary" icon={DotsIcon} iconOnly label="See more" extension='narrow' />
 </div>
 ```
 
@@ -134,8 +136,9 @@ You can also pass an Icon directly if you need more flexibility.
 ```
 import Button from 'cozy-ui/transpiled/react/Button';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
 <div>
-  <Button theme="danger" icon={ <Icon icon='trash' color='yellow' /> } label='delete' />
+  <Button theme="danger" icon={ <Icon icon={TrashIcon} color='yellow' /> } label='delete' />
 </div>
 ```
 
@@ -143,9 +146,11 @@ import Icon from 'cozy-ui/transpiled/react/Icon';
 
 ```
 import Button from 'cozy-ui/transpiled/react/Button';
+import PlusIcon from "cozy-ui/transpiled/react/Icons/Plus";
+import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
 <div>
-  <Button icon='plus' label='Add' iconOnly round />
-  <Button theme="secondary" icon='cross' label='Delete' iconOnly round />
+  <Button icon={PlusIcon} label='Add' iconOnly round />
+  <Button theme="secondary" icon={CrossIcon} label='Delete' iconOnly round />
 </div>
 ```
 
@@ -155,12 +160,14 @@ Subtle buttons are buttons without background and borders, wich look "inverted"
 
 ```
 import Button from 'cozy-ui/transpiled/react/Button';
+import PlusIcon from "cozy-ui/transpiled/react/Icons/Plus";
+import CozyIcon from "cozy-ui/transpiled/react/Icons/Cozy";
 <div>
   <p>
-    <Button subtle icon='plus' size='tiny' label='Tiny text' onClick={() => alert('Clicked on Tiny text')} />
-    <Button subtle icon='plus' size='small' label='Small text' onClick={() => alert('Clicked on Small text')} />
-    <Button subtle icon='plus' label='Regular text' onClick={() => alert('Clicked on Regular text')} />
-    <Button subtle icon='plus' size='large' label='Large text' onClick={() => alert('Clicked on Large text')} />
+    <Button subtle icon={PlusIcon} size='tiny' label='Tiny text' onClick={() => alert('Clicked on Tiny text')} />
+    <Button subtle icon={PlusIcon} size='small' label='Small text' onClick={() => alert('Clicked on Small text')} />
+    <Button subtle icon={PlusIcon} label='Regular text' onClick={() => alert('Clicked on Regular text')} />
+    <Button subtle icon={PlusIcon} size='large' label='Large text' onClick={() => alert('Clicked on Large text')} />
   </p>
   <p>
     <Button subtle theme='secondary' label='Secondary theme' onClick={() => alert('Clicked on Secondary theme')} />
@@ -177,10 +184,10 @@ import Button from 'cozy-ui/transpiled/react/Button';
     <Button subtle busy theme='danger' label='Busy danger'  onClick={() => alert('Clicked on Busy danger')} />
   </p>
   <p>
-    <Button subtle icon='cozy' label='Cozy' />
+    <Button subtle icon={CozyIcon} label='Cozy' />
   </p>
   <p>
-    <Button subtle icon='plus' label='Subtle Secondary Cozy' theme='secondary' />
+    <Button subtle icon={PlusIcon} label='Subtle Secondary Cozy' theme='secondary' />
   </p>
 </div>
 ```
@@ -189,6 +196,7 @@ import Button from 'cozy-ui/transpiled/react/Button';
 
 ```
 import { ButtonLink } from 'cozy-ui/transpiled/react/Button';
+import CozyIcon from "cozy-ui/transpiled/react/Icons/Cozy";
 <div>
   <p>
     <ButtonLink size="tiny" href="https://cozy.io" target="_blank" label='Link to Cozy.io'/>
@@ -203,7 +211,7 @@ import { ButtonLink } from 'cozy-ui/transpiled/react/Button';
     <ButtonLink size="large" href="https://cozy.io" target="_blank" label='Link to Cozy.io'/>
   </p>
   <p>
-    <ButtonLink subtle icon='cozy' href="https://cozy.io" target="_blank" label='Link to Cozy.io'/>
+    <ButtonLink subtle icon={CozyIcon} href="https://cozy.io" target="_blank" label='Link to Cozy.io'/>
   </p>
 </div>
 ```
diff --git a/react/Chip/Readme.md b/react/Chip/Readme.md
index a3a0dd04c8..14c9cf65df 100644
--- a/react/Chip/Readme.md
+++ b/react/Chip/Readme.md
@@ -4,6 +4,7 @@ Chips represent complex entities in small blocks, such as a contact.
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
 const ContactChip = ({ contact }) => (
   <Chip style={{ paddingLeft: '0.25rem' }}>
     <Avatar textId={ contact.name } text={contact.initials} size='small' style={{ marginRight: '0.5rem' }}/> {contact.name}
@@ -12,7 +13,7 @@ const ContactChip = ({ contact }) => (
 
 <div>
   <Chip>
-    <Icon icon='file' style={{ marginRight: '0.5rem' }}/> File
+    <Icon icon={FileIcon} style={{ marginRight: '0.5rem' }}/> File
   </Chip><br/>
   <ContactChip contact={{ initials: 'AL',  name: 'Ada Lovelace'}} />
   <ContactChip contact={{ initials: 'CB',  name: 'Charles Babbage'}} />
@@ -28,8 +29,9 @@ const ContactChip = ({ contact }) => (
 ```
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
 <Chip.Round>
-  <Icon icon='right'/>
+  <Icon icon={RightIcon}/>
 </Chip.Round>
 ```
 
@@ -49,9 +51,11 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 ```
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
+import LeftIcon from "cozy-ui/transpiled/react/Icons/Left";
 <div>
-  <Chip.Button><Icon icon='right' /></Chip.Button>
-  <Chip.Button disabled><Icon icon='left' /></Chip.Button>
+  <Chip.Button><Icon icon={RightIcon} /></Chip.Button>
+  <Chip.Button disabled><Icon icon={LeftIcon} /></Chip.Button>
 </div>
 ```
 
@@ -139,15 +143,17 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 ```
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith";
 <Chip
   size="small"
   variant="outlined"
   theme="primary"
   onClick={() => alert('you clicked')}
 >
-  <Icon icon="file" size={16} style={{ marginRight: '0.5rem' }} />
+  <Icon icon={FileIcon} size={16} style={{ marginRight: '0.5rem' }} />
   1 invoice
   <Chip.Separator />
-  <Icon icon="openwith" size={16} />
+  <Icon icon={OpenwithIcon} size={16} />
 </Chip>
 ```
diff --git a/react/CompositeRow/Readme.md b/react/CompositeRow/Readme.md
index de0c0b602a..5a585249f4 100644
--- a/react/CompositeRow/Readme.md
+++ b/react/CompositeRow/Readme.md
@@ -7,6 +7,9 @@ import Variants from 'docs/components/Variants'
 
 import Typography from "cozy-ui/transpiled/react/Typography";
 
+import WalletIcon from "cozy-ui/transpiled/react/Icons/Wallet";
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
+
 const fnacLogoURL = 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Fnac_Logo.svg';
 
 const Chip = React.memo(({ children, ...props }) => (
@@ -30,7 +33,7 @@ const compositeStyle = {
 
 const CompositeImage = () => (
   <Circle backgroundColor='var(--melon)'>
-    <Icon icon='wallet' />
+    <Icon icon={WalletIcon} />
   </Circle>
 )
 
@@ -40,7 +43,7 @@ const Amount = () => (
 
 const onDotsClick = () => { alert('clicked dots !')}
 const Dots = () => (
-  <Icon className="u-c-pointer" color="var(--coolGrey)" icon="dots" onClick={onDotsClick}/>
+  <Icon className="u-c-pointer" color="var(--coolGrey)" icon={DotsIcon} onClick={onDotsClick}/>
 )
 
 const Chips = () => (
diff --git a/react/CozyDialogs/Readme.md b/react/CozyDialogs/Readme.md
index d5af2f93dc..254a0a69bf 100644
--- a/react/CozyDialogs/Readme.md
+++ b/react/CozyDialogs/Readme.md
@@ -38,6 +38,8 @@ import Button from 'cozy-ui/transpiled/react/Button'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
+import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud";
+
 const handleClose = () => setState({ modalOpened: !state.modalOpened })
 
 const DialogComponent = state.modal
@@ -78,7 +80,7 @@ const ConfirmDialogActions = () => {
 
 const dialogTitles = {
   ConfirmDialog: "Are you sure ?",
-  IllustrationDialog: <Icon icon="cloud" size="140" />,
+  IllustrationDialog: <Icon icon={CloudIcon} size="140" />,
   FixedDialog: 'Fixed Dialog',
   FixedActionsDialog: 'Fixed Actions Dialog',
   Dialog: 'Dialog'
diff --git a/react/Dialog/Readme.md b/react/Dialog/Readme.md
index 0995c86583..a9259d8579 100644
--- a/react/Dialog/Readme.md
+++ b/react/Dialog/Readme.md
@@ -26,6 +26,8 @@ import MenuItem from '@material-ui/core/MenuItem'
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
+
 const handleClose = () => setState({ modalOpened: !state.modalOpened })
 
 initialState = { modalOpened: isTesting() }
@@ -70,7 +72,7 @@ const ExampleDialog = ({ open, onClose }) => {
                 <Button
                   label='Click for more !'
                   theme="text"
-                  icon="dots"
+                  icon={DotsIcon}
                   extension="narrow"
                   iconOnly
                   className="u-m-0 u-coolGrey"
@@ -101,7 +103,7 @@ const ExampleDialog = ({ open, onClose }) => {
             <Button
               label='Click for more !'
               theme="text"
-              icon="dots"
+              icon={DotsIcon}
               extension="narrow"
               iconOnly
               className="u-m-0 u-coolGrey"
@@ -123,7 +125,7 @@ const ExampleDialog = ({ open, onClose }) => {
         />
       </DialogActions>
     </Dialog>
-  )
+  );
 }
 
 ;<>
diff --git a/react/FileInput/Readme.md b/react/FileInput/Readme.md
index 3eeaef1ca8..384b203663 100644
--- a/react/FileInput/Readme.md
+++ b/react/FileInput/Readme.md
@@ -16,8 +16,9 @@ You render what you want:
 ```jsx
 import FileInput from 'cozy-ui/transpiled/react/FileInput';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
 <FileInput onChange={console.log}>
-  <Icon icon="file" role="button" />
+  <Icon icon={FileIcon} role="button" />
 </FileInput>
 ```
 
diff --git a/react/GhostFileBadge/Readme.md b/react/GhostFileBadge/Readme.md
index c3fcd5cb1f..88527d7ba5 100644
--- a/react/GhostFileBadge/Readme.md
+++ b/react/GhostFileBadge/Readme.md
@@ -5,8 +5,10 @@ import GhostFileBadge from 'cozy-ui/transpiled/react/GhostFileBadge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 
+import FolderIcon from "cozy-ui/transpiled/react/Icons/Folder";
+
 <p>
-  <GhostFileBadge badgeContent={<Icon icon="folder" size="16" />}>
+  <GhostFileBadge badgeContent={<Icon icon={FolderIcon} size="16" />}>
     <Avatar text="CD" size="small" />
   </GhostFileBadge>
 </p>
diff --git a/react/Hero/Readme.md b/react/Hero/Readme.md
index 0585a3100f..b369de643e 100644
--- a/react/Hero/Readme.md
+++ b/react/Hero/Readme.md
@@ -14,6 +14,10 @@ import Hero, {
 import Button from 'cozy-ui/transpiled/react/Button';
 import { t } from '../../docs/utils';
 
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
+import PaperplaneIcon from "cozy-ui/transpiled/react/Icons/Paperplane";
+import FolderIcon from "cozy-ui/transpiled/react/Icons/Folder";
+
 const RED = '#f52d2d'
 const PURPLE = '#a75bcb'
 const BLUE = '#2d8af2';
@@ -22,17 +26,17 @@ const BLUE = '#2d8af2';
   <Title>{t('Onboarding.title.desktop')}</Title>
   <Sections>
     <Section>
-      <Icon color={RED} icon='warning' />
+      <Icon color={RED} icon={WarningIcon} />
       <Subtitle>{t('Onboarding.manage-budget.title')}</Subtitle>
       <Paragraph>{t('Onboarding.manage-budget.description')}</Paragraph>
     </Section>
     <Section>
-      <Icon color={PURPLE} icon='paperplane' />
+      <Icon color={PURPLE} icon={PaperplaneIcon} />
       <Subtitle>{t('Onboarding.save-time.title')}</Subtitle>
       <Paragraph>{t('Onboarding.save-time.description')}</Paragraph>
     </Section>
     <Section>
-      <Icon color={BLUE} icon='folder' />
+      <Icon color={BLUE} icon={FolderIcon} />
       <Subtitle>{t('Onboarding.cozy-assistant.title')}</Subtitle>
       <Paragraph>{t('Onboarding.cozy-assistant.description')}</Paragraph>
     </Section>
diff --git a/react/Icon/Readme.md b/react/Icon/Readme.md
index cac3bd3671..4ca5432c8e 100644
--- a/react/Icon/Readme.md
+++ b/react/Icon/Readme.md
@@ -52,9 +52,11 @@ Use `spin` and `rotate` if you want you to turn your icons upside down 🙃.
 
 ```
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import SpinnerIcon from "cozy-ui/transpiled/react/Icons/Spinner";
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
 <div>
-  <Icon icon='spinner' color='#0bda51' spin/>{'\u00A0'}
-  <Icon icon='right' color='#c30017' rotate={45}/>
+  <Icon icon={SpinnerIcon} color='#0bda51' spin/>{'\u00A0'}
+  <Icon icon={RightIcon} color='#c30017' rotate={45}/>
 </div>
 ```
 
@@ -85,8 +87,9 @@ Icon forwards unknown props to the underlying `<svg />` element.
 
 ```
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
 <div>
-  <Icon icon='warning' onClick={() => alert('Be careful !')} width={32} height={32} color="var(--errorColor)" /><span>← Click it</span>
+  <Icon icon={WarningIcon} onClick={() => alert('Be careful !')} width={32} height={32} color="var(--errorColor)" /><span>← Click it</span>
 </div>
 ```
 
diff --git a/react/IconStack/Readme.md b/react/IconStack/Readme.md
index ffda72bdd7..485fc12935 100644
--- a/react/IconStack/Readme.md
+++ b/react/IconStack/Readme.md
@@ -8,8 +8,10 @@ Use IconStack when the resulting combination of icons is considered a single ent
 ```
 import IconStack from 'cozy-ui/transpiled/react/IconStack';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone";
+import BankIcon from "cozy-ui/transpiled/react/Icons/Bank";
 <IconStack
-  background={<Icon icon="file-duotone" color="blue"  size={32} />}
-  foreground={<Icon icon="bank" color="red" height={16} width={16} />}
+  background={<Icon icon={FileDuotoneIcon} color="blue"  size={32} />}
+  foreground={<Icon icon={BankIcon} color="red" height={16} width={16} />}
 />
 ```
diff --git a/react/InfosBadge/Readme.md b/react/InfosBadge/Readme.md
index 642a9cfc72..f36a09d7d0 100644
--- a/react/InfosBadge/Readme.md
+++ b/react/InfosBadge/Readme.md
@@ -4,9 +4,12 @@ The InfosBadge is used to provide extra information about the item it is annotat
 import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
+import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled";
+
 <p>
-  <InfosBadge badgeContent={<Icon icon="link" size="10" />}>
-    <Icon icon="circle-filled" size="32" color="var(--slateGrey)" />
+  <InfosBadge badgeContent={<Icon icon={LinkIcon} size="10" />}>
+    <Icon icon={CircleFilledIcon} size="32" color="var(--slateGrey)" />
   </InfosBadge>
 </p>
 ```
diff --git a/react/Labs/IconGrid/Readme.md b/react/Labs/IconGrid/Readme.md
index 2eaba36c96..f2606f25f7 100644
--- a/react/Labs/IconGrid/Readme.md
+++ b/react/Labs/IconGrid/Readme.md
@@ -5,10 +5,14 @@ A component to display a grid of 4 icons. This component is not considered stabl
 ```
 import IconGrid from 'cozy-ui/transpiled/react/Labs/IconGrid';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import FileIcon from "cozy-ui/transpiled/react/Icons/File";
+import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud";
+import CloudHappyIcon from "cozy-ui/transpiled/react/Icons/CloudHappy";
+import OnlineIcon from "cozy-ui/transpiled/react/Icons/Online";
 <IconGrid>
-  <Icon icon="file" />
-  <Icon icon="cloud" />
-  <Icon icon="cloud-happy" />
-  <Icon icon="online" />
+  <Icon icon={FileIcon} />
+  <Icon icon={CloudIcon} />
+  <Icon icon={CloudHappyIcon} />
+  <Icon icon={OnlineIcon} />
 </IconGrid>
 ```
diff --git a/react/Media/Readme.md b/react/Media/Readme.md
index 9c75d1bfad..11ebf1df84 100644
--- a/react/Media/Readme.md
+++ b/react/Media/Readme.md
@@ -15,11 +15,12 @@ Flexbox : <https://philipwalton.github.io/solved-by-flexbox/demos/media-object/>
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
 const imgStyle = { paddingRight: '1rem' };
 
 <Media>
   <Img style={imgStyle}>
-    <Icon icon='people' />
+    <Icon icon={PeopleIcon} />
   </Img>
   <Bd>
     <Typography variant='body1'>{ content.ada.short }</Typography>
@@ -34,11 +35,13 @@ import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 
+import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
+
 const imgStyle = { paddingRight: '1rem' };
 
 <Media align='top'>
   <Img style={imgStyle}>
-    <Icon icon='people' />
+    <Icon icon={PeopleIcon} />
   </Img>
   <Bd>
     <Typography variant='body1'>{ content.ada.short }</Typography>
@@ -53,11 +56,13 @@ import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 
+import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
+
 const imgStyle = { paddingRight: '1rem' };
 
 <Media align='bottom'>
   <Img style={imgStyle}>
-    <Icon icon='people' />
+    <Icon icon={PeopleIcon} />
   </Img>
   <Bd>
     <Typography variant='body1'>{ content.ada.short }</Typography>
diff --git a/react/Menu/Readme.md b/react/Menu/Readme.md
index c58a9e1bf4..7b14b1764b 100644
--- a/react/Menu/Readme.md
+++ b/react/Menu/Readme.md
@@ -12,6 +12,7 @@ the item is `disabled`.
 ```
 import Menu, { MenuItem } from 'cozy-ui/transpiled/react/Menu';
 import Icon from 'cozy-ui/transpiled/react/Icon';
+import PaperplaneIcon from "cozy-ui/transpiled/react/Icons/Paperplane";
 const showItem = itemData => alert(JSON.stringify(itemData));
 const showWarning = itemData => alert(itemData + ' is disabled');
 
@@ -19,7 +20,7 @@ const showWarning = itemData => alert(itemData + ' is disabled');
   <MenuItem data='hello'>Hello !</MenuItem>
   <MenuItem disabled data='bonjour'>Bonjour !</MenuItem>
   <hr />
-  <MenuItem icon={<Icon icon='paperplane'/>} onSelect={x => alert('You clicked hola')} data='hola'>
+  <MenuItem icon={<Icon icon={PaperplaneIcon}/>} onSelect={x => alert('You clicked hola')} data='hola'>
     <div>¡Hola!</div>
     <div>¿Qué tal?</div>
   </MenuItem>
diff --git a/react/MuiCozyTheme/ExpansionPanel/Readme.md b/react/MuiCozyTheme/ExpansionPanel/Readme.md
index 4e93e86866..e3e06c639e 100644
--- a/react/MuiCozyTheme/ExpansionPanel/Readme.md
+++ b/react/MuiCozyTheme/ExpansionPanel/Readme.md
@@ -44,6 +44,8 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import { withStyles } from '@material-ui/core/styles';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
+import BottomIcon from "cozy-ui/transpiled/react/Icons/Bottom";
+
 const StyledSummary = withStyles(() => ({
   expand: {}, // required to use `&$expanded` selector
   content: {
@@ -61,7 +63,7 @@ const StyledSummary = withStyles(() => ({
 
 <ExpansionPanel>
   <StyledSummary
-    expandIcon={<Icon icon="bottom" color="black" width={16} />}
+    expandIcon={<Icon icon={BottomIcon} color="black" width={16} />}
     IconButtonProps={{
       disableRipple: true
     }}
diff --git a/react/MuiCozyTheme/List/Readme.md b/react/MuiCozyTheme/List/Readme.md
index 7aedc0b2b0..747a4a8c9b 100644
--- a/react/MuiCozyTheme/List/Readme.md
+++ b/react/MuiCozyTheme/List/Readme.md
@@ -25,6 +25,8 @@ import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider';
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText';
 
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
+
 <List>
   <ListSubheader>Section 1</ListSubheader>
   <ListItem button>
@@ -40,7 +42,7 @@ import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText';
           <Button
             label='Click for more !'
             theme="text"
-            icon="dots"
+            icon={DotsIcon}
             extension="narrow"
             iconOnly
             className="u-m-0 u-coolGrey"
@@ -71,7 +73,7 @@ import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText';
       <Button
         label='Click for more !'
         theme="text"
-        icon="dots"
+        icon={DotsIcon}
         extension="narrow"
         iconOnly
         className="u-m-0 u-coolGrey"
diff --git a/react/MuiCozyTheme/Menus/Readme.md b/react/MuiCozyTheme/Menus/Readme.md
index 25b8b058a6..6f06d88bbc 100644
--- a/react/MuiCozyTheme/Menus/Readme.md
+++ b/react/MuiCozyTheme/Menus/Readme.md
@@ -3,12 +3,14 @@ import Menu from 'cozy-ui/transpiled/react/MuiCozyTheme/Menus';
 import MenuItem from '@material-ui/core/MenuItem';
 import Button from 'cozy-ui/transpiled/react/Button';
 
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
+
 <Menu
   component={
     <Button
       label='Click for more !'
       theme="secondary"
-      icon="dots"
+      icon={DotsIcon}
       extension="narrow"
       iconOnly
     />
diff --git a/react/NavigationList/Readme.md b/react/NavigationList/Readme.md
index 2c99ceb7c4..c740ed7bfb 100644
--- a/react/NavigationList/Readme.md
+++ b/react/NavigationList/Readme.md
@@ -20,6 +20,12 @@ import NavigationList, {
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
+import GearIcon from "cozy-ui/transpiled/react/Icons/Gear";
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
+import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
+import BankIcon from "cozy-ui/transpiled/react/Icons/Bank";
+
 const NavigationListExample = ({ style }) => {
   return (
     <NavigationList style={style}>
@@ -27,12 +33,12 @@ const NavigationListExample = ({ style }) => {
         <NavigationListSection>
        <ListItem>
           <ListItemIcon>
-            <Icon icon="gear" size={mediumSize} />
+            <Icon icon={GearIcon} size={mediumSize} />
           </ListItemIcon>
           <ListItemText primary="General settings" />
           <ListItemSecondaryAction>
             <Icon
-              icon="right"
+              icon={RightIcon}
               size={smallSize}
               className="u-mr-1 u-coolGrey"
             />
@@ -41,12 +47,12 @@ const NavigationListExample = ({ style }) => {
         <Divider inset />
         <ListItem>
           <ListItemIcon>
-            <Icon icon="gear" size={largeSize} />
+            <Icon icon={GearIcon} size={largeSize} />
           </ListItemIcon>
           <ListItemText primary="A large icon does not change size of icon area" />
           <ListItemSecondaryAction>
             <Icon
-              icon="right"
+              icon={RightIcon}
               size={smallSize}
               className="u-mr-1 u-coolGrey"
             />
@@ -55,7 +61,7 @@ const NavigationListExample = ({ style }) => {
         <Divider inset />
         <ListItem>
           <ListItemIcon>
-            <Icon icon="people" size={smallSize} />
+            <Icon icon={PeopleIcon} size={smallSize} />
           </ListItemIcon>
           <ListItemText
             primary="User preferences"
@@ -63,7 +69,7 @@ const NavigationListExample = ({ style }) => {
           />
           <ListItemSecondaryAction>
             <Icon
-              icon="right"
+              icon={RightIcon}
               size={smallSize}
               className="u-mr-1 u-coolGrey"
             />
@@ -72,7 +78,7 @@ const NavigationListExample = ({ style }) => {
         <Divider inset />
         <ListItem>
           <ListItemIcon>
-            <Icon icon="trash" className="u-error" size={smallSize} />
+            <Icon icon={TrashIcon} className="u-error" size={smallSize} />
           </ListItemIcon>
           <ListItemText
             primary="Delete account"
@@ -86,12 +92,12 @@ const NavigationListExample = ({ style }) => {
       <NavigationListSection>
         <ListItem>
           <ListItemIcon>
-            <Icon icon="bank" size={smallSize} />
+            <Icon icon={BankIcon} size={smallSize} />
           </ListItemIcon>
           <ListItemText primary="Bank accounts" />
           <ListItemSecondaryAction>
             <Icon
-              icon="right"
+              icon={RightIcon}
               size={smallSize}
               className="u-mr-1 u-coolGrey"
             />
@@ -99,7 +105,7 @@ const NavigationListExample = ({ style }) => {
         </ListItem>
       </NavigationListSection>
     </NavigationList>
-  )
+  );
 }
 
 
diff --git a/react/Wizard/Readme.md b/react/Wizard/Readme.md
index c46b0e06d9..effad23c40 100644
--- a/react/Wizard/Readme.md
+++ b/react/Wizard/Readme.md
@@ -14,6 +14,8 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import Field from 'cozy-ui/transpiled/react/Field'
 import Button from 'cozy-ui/transpiled/react/Button';
 
+import NextIcon from "cozy-ui/transpiled/react/Icons/Next";
+
 const t = x => x;
 const isTiny = false;
 const error = true;
@@ -21,51 +23,53 @@ const fetching = false;
 const onboarding = false;
 
 const WizardExample = ({ onNext, onRegister }) => { 
-  return <Wizard>
-    <WizardWrapper>
-      <WizardHeader>
-        <WizardPreviousButton
-          subtle
-          icon="previous"
-          iconOnly
-          extension="narrow"
-          onClick={null}
-          type="button"
-          label="Previous"
-        />
-        <WizardTitle>
-          Connect to your Cozy
-        </WizardTitle>
-      </WizardHeader>
-      <WizardMain>
-        <Field label='Login' type='text' placeholder='dalailama@cozycloud.cc' />
-        <Field label='Password' type='text' />
-        <WizardErrors tag='p'>
-          There is an error
-        </WizardErrors>
-      </WizardMain>
-      <WizardFooter className={isTiny ? 'u-mt-auto' : 'u-pb-2'}>
-        <WizardNextButton
-          disabled={false}
-          busy={false}
-          label="Next step"
-          size={isTiny ? 'normal' : 'large'}
-          onClick={onNext}
-        >
-          {!fetching && <Icon icon="next" color="white" />}
-        </WizardNextButton>
-        <Button
-          label="Register an account"
-          size={isTiny ? 'normal' : 'large'}
-          subtle={true}
-          type={'button'}
-          theme="text"
-          onboarding={onboarding}
-          onClick={onRegister}
-        />
-      </WizardFooter>
-    </WizardWrapper>
-  </Wizard>
+  return (
+    <Wizard>
+      <WizardWrapper>
+        <WizardHeader>
+          <WizardPreviousButton
+            subtle
+            icon="previous"
+            iconOnly
+            extension="narrow"
+            onClick={null}
+            type="button"
+            label="Previous"
+          />
+          <WizardTitle>
+            Connect to your Cozy
+          </WizardTitle>
+        </WizardHeader>
+        <WizardMain>
+          <Field label='Login' type='text' placeholder='dalailama@cozycloud.cc' />
+          <Field label='Password' type='text' />
+          <WizardErrors tag='p'>
+            There is an error
+          </WizardErrors>
+        </WizardMain>
+        <WizardFooter className={isTiny ? 'u-mt-auto' : 'u-pb-2'}>
+          <WizardNextButton
+            disabled={false}
+            busy={false}
+            label="Next step"
+            size={isTiny ? 'normal' : 'large'}
+            onClick={onNext}
+          >
+            {!fetching && <Icon icon={NextIcon} color="white" />}
+          </WizardNextButton>
+          <Button
+            label="Register an account"
+            size={isTiny ? 'normal' : 'large'}
+            subtle={true}
+            type={'button'}
+            theme="text"
+            onboarding={onboarding}
+            onClick={onRegister}
+          />
+        </WizardFooter>
+      </WizardWrapper>
+    </Wizard>
+  );
 }
 
 initialState = { showExample: isTesting() };

From 4e293410501d58e34c5c169651efb003fbfef879 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 08:22:47 +0100
Subject: [PATCH 3/8] docs: Remove IconSprite

---
 docs/components/SectionsRenderer.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/components/SectionsRenderer.jsx b/docs/components/SectionsRenderer.jsx
index 440a07aa45..d35e5b8e91 100644
--- a/docs/components/SectionsRenderer.jsx
+++ b/docs/components/SectionsRenderer.jsx
@@ -7,7 +7,6 @@ export default class SectionsRenderer extends Component {
     return (
       <>
         <DefaultSectionsRenderer>{this.props.children}</DefaultSectionsRenderer>
-        <IconSprite />
       </>
     )
   }

From f96cc480ac87815962cfea5af8a0cce0fd31809a Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 11:38:57 +0100
Subject: [PATCH 4/8] feat: Update argos CLI

---
 package.json |   2 +-
 yarn.lock    | 256 +++++++++++++++++++++++++++++++++------------------
 2 files changed, 165 insertions(+), 93 deletions(-)

diff --git a/package.json b/package.json
index 0b9e79439c..4a52f75752 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@svgr/cli": "^5.4.0",
     "@testing-library/react": "^9.5.0",
     "@testing-library/react-hooks": "^3.2.1",
-    "argos-cli": "0.1.3",
+    "argos-cli": "^0.3.3",
     "autoprefixer-stylus": "1.0.0",
     "babel-loader": "8.1.0",
     "babel-plugin-css-modules-transform": "1.6.2",
diff --git a/yarn.lock b/yarn.lock
index a649e0662e..eecce3169b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3129,21 +3129,21 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
-argos-cli@0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/argos-cli/-/argos-cli-0.1.3.tgz#347c392a46d7a486d6765829bdfa8aa87fb61e09"
-  integrity sha512-7bF42cO+tlOJt1L7FiWdU4QRspKO55kQCI28TCuIxi5TAx9uQu1AQsxC8ejtHm73JvJ5pROnikHj8ISPJz+tpw==
+argos-cli@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/argos-cli/-/argos-cli-0.3.3.tgz#aab468de6f7f125af26335e7a4edcb74f2be949f"
+  integrity sha512-qZQs7IGakQYaz6VshSVg1F1viM71ud7CesUPBcFRkl0394zZfYcUuElQHHJmfKeeh78K/fnlBxoyyImB91wFIw==
   dependencies:
-    chalk "^2.4.2"
-    commander "^3.0.1"
-    convict "^5.1.0"
-    form-data "^2.5.1"
-    glob "^7.1.3"
+    chalk "^4.1.0"
+    commander "^5.1.0"
+    convict "^6.0.0"
+    form-data "^3.0.0"
+    glob "^7.1.6"
     glob-promise "^3.4.0"
     mz "^2.7.0"
     node-fetch "^2.3.0"
     raven "^2.6.4"
-    update-notifier "^3.0.1"
+    update-notifier "^4.1.0"
 
 argparse@^1.0.10, argparse@^1.0.7:
   version "1.0.10"
@@ -3773,19 +3773,19 @@ boxen@^1.2.1:
     term-size "^1.2.0"
     widest-line "^2.0.0"
 
-boxen@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"
-  integrity sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==
+boxen@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64"
+  integrity sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==
   dependencies:
     ansi-align "^3.0.0"
     camelcase "^5.3.1"
-    chalk "^2.4.2"
+    chalk "^3.0.0"
     cli-boxes "^2.2.0"
-    string-width "^3.0.0"
-    term-size "^1.2.0"
-    type-fest "^0.3.0"
-    widest-line "^2.0.0"
+    string-width "^4.1.0"
+    term-size "^2.1.0"
+    type-fest "^0.8.1"
+    widest-line "^3.1.0"
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -4310,7 +4310,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
@@ -4854,6 +4854,13 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -4864,11 +4871,6 @@ commander@^2.19.0, commander@^2.20.0, commander@~2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
-commander@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
-  integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
-
 commander@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
@@ -5014,17 +5016,17 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
-configstore@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-4.0.0.tgz#5933311e95d3687efb592c528b922d9262d227e7"
-  integrity sha512-CmquAXFBocrzaSM8mtGPMM/HiWmyIpr4CcJl/rgY2uCObZ/S7cKU0silxslqJejl+t/T9HS8E0PUNQD81JGUEQ==
+configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
   dependencies:
-    dot-prop "^4.1.0"
+    dot-prop "^5.2.0"
     graceful-fs "^4.1.2"
-    make-dir "^1.0.0"
-    unique-string "^1.0.0"
-    write-file-atomic "^2.0.0"
-    xdg-basedir "^3.0.0"
+    make-dir "^3.0.0"
+    unique-string "^2.0.0"
+    write-file-atomic "^3.0.0"
+    xdg-basedir "^4.0.0"
 
 connect-history-api-fallback@^1.6.0:
   version "1.6.0"
@@ -5153,16 +5155,13 @@ convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-convict@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/convict/-/convict-5.1.0.tgz#d510cef0b9fd6424f4de09bc279b4481eec116ec"
-  integrity sha512-0+Rf3wUfEpz+UuwksNgjREf+81eRDsiQ64ZAs3Gh2rZeXIjiI5m0pxwybRZUebpSKEfOFxN5oUthIUpnqIMh6w==
+convict@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/convict/-/convict-6.0.0.tgz#4be829f001a778d337d32ec79e9ae7f2e39df1a6"
+  integrity sha512-osfPkv5yjVoZqrTWBXuh/ABGpFoaJplbt0WXr0CodR4CSWt8UnzY4PSUyRz/+5BX5YUtWcToG29Kr0B6xhdIMg==
   dependencies:
-    json5 "2.1.0"
-    lodash.clonedeep "4.5.0"
-    moment "2.24.0"
-    validator "10.11.0"
-    yargs-parser "13.0.0"
+    lodash.clonedeep "^4.5.0"
+    yargs-parser "^18.1.3"
 
 cookie-signature@1.0.6:
   version "1.0.6"
@@ -6257,6 +6256,13 @@ dot-prop@^4.1.0, dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.0"
+
 dotenv@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
@@ -6598,6 +6604,11 @@ es6-promisify@^6.0.0:
   resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-6.1.1.tgz#46837651b7b06bf6fff893d03f29393668d01621"
   integrity sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==
 
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -7590,13 +7601,13 @@ fork-ts-checker-webpack-plugin@1.5.0:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
-form-data@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
-  integrity sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==
+form-data@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.0.tgz#31b7e39c85f1355b7139ee0c647cf0de7f83c682"
+  integrity sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "^1.0.6"
+    combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
 form-data@~2.3.2:
@@ -8047,6 +8058,13 @@ global-dirs@^0.1.0, global-dirs@^0.1.1:
   dependencies:
     ini "^1.3.4"
 
+global-dirs@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.1.0.tgz#e9046a49c806ff04d6c1825e196c8f0091e8df4d"
+  integrity sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==
+  dependencies:
+    ini "1.3.7"
+
 global-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -8900,6 +8918,11 @@ inherits@2.0.4, inherits@^2.0.4:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+ini@1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+  integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
+
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@@ -9323,15 +9346,23 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-installed-globally@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
+  dependencies:
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"
+
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
   integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
 
-is-npm@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
-  integrity sha512-wsigDr1Kkschp2opC4G3yA6r9EgVA6NjRpWzIi9axXqeIaAATPRJc4uLujXe3Nd9uO8KoDyA4MD6aZSeXTADhA==
+is-npm@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
+  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
 is-number-object@^1.0.3:
   version "1.0.3"
@@ -9367,6 +9398,11 @@ is-obj@^1.0.0, is-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
 is-path-cwd@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
@@ -9393,6 +9429,11 @@ is-path-inside@^2.1.0:
   dependencies:
     path-is-inside "^1.0.2"
 
+is-path-inside@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
+  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
+
 is-plain-obj@^1.0.0, is-plain-obj@^1.1, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -9517,7 +9558,7 @@ is-text-path@^1.0.0, is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -10204,13 +10245,6 @@ json3@^3.3.2:
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
   integrity sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=
 
-json5@2.1.0, json5@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
-  integrity sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==
-  dependencies:
-    minimist "^1.2.0"
-
 json5@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -10230,6 +10264,13 @@ json5@^2.0.0, json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+json5@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
+  integrity sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==
+  dependencies:
+    minimist "^1.2.0"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -10829,7 +10870,7 @@ lodash.capitalize@^4.2.1:
   resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
   integrity sha1-+CbJtOKoUR2E46yinbBeGk87cqk=
 
-lodash.clonedeep@4.5.0, lodash.clonedeep@^4.5.0, lodash.clonedeep@~4.5.0:
+lodash.clonedeep@^4.5.0, lodash.clonedeep@~4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
@@ -11093,6 +11134,13 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
 make-event-props@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.2.0.tgz#96b87d88919533b8f8934b58b4c3d5679459a0cf"
@@ -11789,11 +11837,6 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
-
 moo@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
@@ -14616,6 +14659,13 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pupa@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+  dependencies:
+    escape-goat "^2.0.0"
+
 puppeteer@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-2.1.1.tgz#ccde47c2a688f131883b50f2d697bd25189da27e"
@@ -17762,6 +17812,11 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+term-size@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+
 terser-webpack-plugin@^1.2.3, terser-webpack-plugin@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
@@ -18108,7 +18163,7 @@ type-fest@^0.18.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.0.tgz#2edfa6382d48653707344f7fccdb0443d460e8d6"
   integrity sha512-fbDukFPnJBdn2eZ3RR+5mK2slHLFd6gYHY7jna1KWWy4Yr4XysHuCdXRzy+RiG/HwG4WJat00vdC2UHky5eKiQ==
 
-type-fest@^0.3.0, type-fest@^0.3.1:
+type-fest@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
   integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
@@ -18131,6 +18186,13 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -18532,23 +18594,24 @@ update-notifier@^2.3.0, update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-update-notifier@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-3.0.1.tgz#78ecb68b915e2fd1be9f767f6e298ce87b736250"
-  integrity sha512-grrmrB6Zb8DUiyDIaeRTBCkgISYUgETNe7NglEbVsrLWXeESnlCSP50WfRSj/GmzMPl6Uchj24S/p80nP/ZQrQ==
+update-notifier@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
+  integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
   dependencies:
-    boxen "^3.0.0"
-    chalk "^2.0.1"
-    configstore "^4.0.0"
+    boxen "^4.2.0"
+    chalk "^3.0.0"
+    configstore "^5.0.1"
     has-yarn "^2.1.0"
     import-lazy "^2.1.0"
     is-ci "^2.0.0"
-    is-installed-globally "^0.1.0"
-    is-npm "^3.0.0"
+    is-installed-globally "^0.3.1"
+    is-npm "^4.0.0"
     is-yarn-global "^0.3.0"
     latest-version "^5.0.0"
-    semver-diff "^2.0.0"
-    xdg-basedir "^3.0.0"
+    pupa "^2.0.1"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
 
 upper-case@^1.1.1:
   version "1.1.3"
@@ -18727,11 +18790,6 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-validator@10.11.0:
-  version "10.11.0"
-  resolved "https://registry.yarnpkg.com/validator/-/validator-10.11.0.tgz#003108ea6e9a9874d31ccc9e5006856ccd76b228"
-  integrity sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw==
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -19115,6 +19173,13 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
 window-size@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
@@ -19230,6 +19295,16 @@ write-file-atomic@^2.4.3:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
@@ -19268,6 +19343,11 @@ xdg-basedir@^3.0.0:
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
+xdg-basedir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
+  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -19313,14 +19393,6 @@ yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
-yargs-parser@13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.0.0.tgz#3fc44f3e76a8bdb1cc3602e860108602e5ccde8b"
-  integrity sha512-w2LXjoL8oRdRQN+hOyppuXs+V/fVAYtpcrRxZuF7Kt/Oc+Jr2uAcVntaUTNT6w5ihoWfFDpNY8CPx1QskxZ/pw==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs-parser@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
@@ -19352,7 +19424,7 @@ yargs-parser@^15.0.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^18.1.2:
+yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
   integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==

From b0105377c0896c15694b85f05be765de7ab894a5 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 11:44:06 +0100
Subject: [PATCH 5/8] feat: Change argos upload commands not to shadow argos
 CLI

---
 .travis.yml  | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 81079968a4..b354fb347b 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -16,7 +16,7 @@ script:
   - yarn screenshots --mode react --viewport 300x600 --no-empty-screenshot-dir
   - yarn screenshots --mode stack --no-empty-screenshot-dir
   - yarn screenshots --mode kss --no-empty-screenshot-dir
-  - yarn argos --token $ARGOS_TOKEN --branch $TRAVIS_BRANCH --commit $TRAVIS_COMMIT
+  - yarn argos:upload --token $ARGOS_TOKEN --branch $TRAVIS_BRANCH --commit $TRAVIS_COMMIT
 deploy:
   - provider: script
     repo: cozy/cozy-ui
diff --git a/package.json b/package.json
index 4a52f75752..2422a23fe8 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/cozy/cozy-ui",
   "scripts": {
-    "argos": "argos upload screenshots/",
+    "argos:upload": "argos upload screenshots/",
     "stylus-build": "stylus -c --include stylus  --use ./node_modules/autoprefixer-stylus",
     "build:css:all": "yarn build:css && yarn build:css:utils",
     "build:css": "env CSSMODULES=false yarn run stylus-build -o dist/cozy-ui.min.css stylus/cozy-ui/build.styl",

From 321f7b405c44ae68ca23f55fff2a60179e5f773b Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 12:00:54 +0100
Subject: [PATCH 6/8] fix: Use svgr icons in examples

---
 react/ActionMenu/Readme.md         |  5 ++---
 react/Avatar/index.jsx             |  3 ++-
 react/BarButton/Readme.md          | 12 ++++++++----
 react/Breadcrumbs/Readme.md        |  6 ++++--
 react/CozyTheme/Readme.md          |  3 ++-
 react/Empty/Readme.md              |  8 ++++++--
 react/Filename/Readme.md           |  4 +++-
 react/HistoryRow/index.jsx         |  3 ++-
 react/Labs/PasswordInput/index.jsx |  4 +++-
 react/Layout/Layout.md             |  9 ++++++---
 react/SelectBox/SelectBox.jsx      |  4 +++-
 react/SelectionBar/Readme.md       |  3 ++-
 react/Sidebar/Readme.md            |  9 ++++++---
 react/UploadQueue/Readme.md        |  5 +++--
 react/Wizard/Readme.md             |  8 ++++----
 15 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
index bd2b2cfc9b..512d3d55d4 100644
--- a/react/ActionMenu/Readme.md
+++ b/react/ActionMenu/Readme.md
@@ -83,7 +83,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
     <ActionMenu
       onClose={hideMenu}>
       <ActionMenuHeader>
-        <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
+        <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
       </ActionMenuHeader>
       <ActionMenuItem left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
       <ActionMenuItem left={<Icon icon={RightIcon} />}>Item 2</ActionMenuItem>
@@ -99,7 +99,6 @@ import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
-
 import FileIcon from "cozy-ui/transpiled/react/Icons/File";
 
 initialState = { menuDisplayed: isTesting() };
@@ -113,7 +112,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
     <ActionMenu
       onClose={hideMenu}>
       <ActionMenuHeader>
-        <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
+        <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
       </ActionMenuHeader>
       <ActionMenuItem onClick={() => alert('click')}left={<Icon icon={FileIcon} />}>Item 1</ActionMenuItem>
   </ActionMenu>}
diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx
index a0a64e2840..560c1c12ef 100644
--- a/react/Avatar/index.jsx
+++ b/react/Avatar/index.jsx
@@ -6,6 +6,7 @@ import assign from 'lodash/assign'
 import palette from '../palette'
 import styles from './styles.styl'
 import Icon, { iconPropType } from '../Icon'
+import PeopleIcon from '../Icons/People'
 import { createSizeStyle } from '../Circle'
 
 const nameToColor = (name = '') => {
@@ -90,7 +91,7 @@ Avatar.defaultProps = {
   size: 'medium',
   className: '',
   disabled: false,
-  icon: 'people',
+  icon: PeopleIcon,
   style: {}
 }
 
diff --git a/react/BarButton/Readme.md b/react/BarButton/Readme.md
index 1dd1d23031..394485f578 100644
--- a/react/BarButton/Readme.md
+++ b/react/BarButton/Readme.md
@@ -17,30 +17,34 @@ return (
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous';
 
-<BarButton icon="previous" disabled />
+<BarButton icon={PreviousIcon} disabled />
 ```
 
 ## `href`
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import UploadIcon from 'cozy-ui/transpiled/react/Icons/Upload';
 
-<BarButton icon="upload" href="http://cozy.io" />
+<BarButton icon={UploadIcon} href="http://cozy.io" />
 ```
 
 ## `icon`
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import CubeIcon from 'cozy-ui/transpiled/react/Icons/Cube';
 
-<BarButton icon="cube" />
+<BarButton icon={CubeIcon} />
 ```
 
 ## `onClick`
 
 ```jsx
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
+import GearIcon from 'cozy-ui/transpiled/react/Icons/Gear';
 
-<BarButton icon="gear" onClick={() => alert('BarButton has been clicked')} />
+<BarButton icon={GearIcon} onClick={() => alert('BarButton has been clicked')} />
 ```
diff --git a/react/Breadcrumbs/Readme.md b/react/Breadcrumbs/Readme.md
index 4b203a62ab..1c979fd16c 100644
--- a/react/Breadcrumbs/Readme.md
+++ b/react/Breadcrumbs/Readme.md
@@ -7,7 +7,9 @@ context.
 ```
 import { Component } from 'react'
 import Breadcrumbs from '.';
-import Icon from '../Icon'
+import Icon from '../Icon';
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
 
 const items = [
   { 
@@ -34,7 +36,7 @@ const Items = ({ items, onClickItem }) => {
   return items.map(item => (
     <div style={{ color: 'var(--primaryTextColor)', height: '2rem', display: 'flex', alignItems: 'center'}} className={item.items ? 'u-c-pointer' : null } onClick={() => onClickItem(item)}>
       <Icon
-        icon={!item.items ? 'file' : 'folder'}
+        icon={!item.items ? FileIcon : FolderIcon}
         className='u-mr-half' color='var(--primaryTextColor)' />
       { item.name }
     </div>
diff --git a/react/CozyTheme/Readme.md b/react/CozyTheme/Readme.md
index 93b8617340..a587e63cd4 100644
--- a/react/CozyTheme/Readme.md
+++ b/react/CozyTheme/Readme.md
@@ -10,6 +10,7 @@ import { Title, SubTitle } from 'cozy-ui/transpiled/react/Text';
 import Button from 'cozy-ui/transpiled/react/Button';
 import BarButton from 'cozy-ui/transpiled/react/BarButton';
 import Paper from 'cozy-ui/transpiled/react/Paper';
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 
 const props = [{}, { disabled: true}, { busy: true }];
 
@@ -30,7 +31,7 @@ const themesSupportingContext = [
       }</p>
     )}
     <SubTitle className='u-white'>BarButton</SubTitle>
-    <BarButton icon='dots' />
+    <BarButton icon={DotsIcon} />
     <div className='u-bg-white u-p-1 u-mb-1'>
       We can always go back to normal theme if a child must "get out"
       of the theme.
diff --git a/react/Empty/Readme.md b/react/Empty/Readme.md
index 308ff1060e..fca98a3d17 100644
--- a/react/Empty/Readme.md
+++ b/react/Empty/Readme.md
@@ -4,6 +4,8 @@ Empty (or error) view in a listing container
 
 ```
 import Empty from 'cozy-ui/transpiled/react/Empty';
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy';
+
 const styles = {
   empty: {
     position: 'relative',
@@ -14,7 +16,7 @@ const styles = {
 };
 
 <div style={styles.empty}>
-  <Empty icon="cozy" title="This list is empty" text="Try adding some content to this list"/>
+  <Empty icon={CozyIcon} title="This list is empty" text="Try adding some content to this list"/>
 </div>
 ```
 
@@ -23,6 +25,8 @@ const styles = {
 ```
 import Empty from 'cozy-ui/transpiled/react/Empty';
 import Button from 'cozy-ui/transpiled/react/Button';
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy';
+
 const styles = {
   empty: {
     position: 'relative',
@@ -33,7 +37,7 @@ const styles = {
 };
 
 <div style={styles.empty}>
-  <Empty id='empty' icon="cozy" title="An error occured" text="It's maybe nothing, just refresh to be sure">
+  <Empty id='empty' icon={CozyIcon} title="An error occured" text="It's maybe nothing, just refresh to be sure">
     <Button className='u-mt-1' label="Try refreshing" />
   </Empty>
 </div>
diff --git a/react/Filename/Readme.md b/react/Filename/Readme.md
index d0eb97f56a..1d64b541f8 100644
--- a/react/Filename/Readme.md
+++ b/react/Filename/Readme.md
@@ -11,7 +11,9 @@ import Filename from 'cozy-ui/transpiled/react/Filename';
 
 ```
 import Filename from 'cozy-ui/transpiled/react/Filename';
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File';
+
 <div>
-  <Filename icon="file" filename="my_awesome_paper" extension=".pdf" />
+  <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
 </div>
 ```
diff --git a/react/HistoryRow/index.jsx b/react/HistoryRow/index.jsx
index 36e60ab5a9..ff4d697b48 100644
--- a/react/HistoryRow/index.jsx
+++ b/react/HistoryRow/index.jsx
@@ -8,6 +8,7 @@ import Icon from '../Icon'
 import styles from './styles.styl'
 
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 
 /**
  *
@@ -30,7 +31,7 @@ const HistoryRow = ({
               size={tag ? 'small' : 'xsmall'}
               className={styles.HistoryRowCircle}
             >
-              {tag && <Icon icon={'file'} color="var(--primaryTextColor)" />}
+              {tag && <Icon icon={FileIcon} color="var(--primaryTextColor)" />}
             </Circle>
           </Img>
         </div>
diff --git a/react/Labs/PasswordInput/index.jsx b/react/Labs/PasswordInput/index.jsx
index 9a93e485d5..26692e2b98 100644
--- a/react/Labs/PasswordInput/index.jsx
+++ b/react/Labs/PasswordInput/index.jsx
@@ -6,6 +6,8 @@ import cx from 'classnames'
 import { getStrength } from './helpers'
 import styles from './styles.styl'
 import PropTypes from 'prop-types'
+import EyeIcon from '../../Icons/Eye'
+import EyeClosedIcon from '../../Icons/EyeClosed'
 
 const HideShowButton = props => {
   const { hidden, className, ...rest } = props
@@ -17,7 +19,7 @@ const HideShowButton = props => {
       {...rest}
     >
       <Icon
-        icon={hidden ? 'eye' : 'eye-closed'}
+        icon={hidden ? EyeIcon : EyeClosedIcon}
         size={16}
         color="var(--coolGrey)"
       />
diff --git a/react/Layout/Layout.md b/react/Layout/Layout.md
index 573853e450..32ed90d941 100644
--- a/react/Layout/Layout.md
+++ b/react/Layout/Layout.md
@@ -11,6 +11,9 @@ import Sidebar from 'cozy-ui/transpiled/react/Sidebar';
 import Nav, { NavItem, NavIcon, NavText, genNavLink } from 'cozy-ui/transpiled/react/Nav';
 import cx from 'classnames'
 import isEqual from 'lodash/isEqual'
+import WarnIcon from 'cozy-ui/transpiled/react/Icons/Warn'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 
 /**
  * In a normal app, ExampleRouterNavLink is from react-router
@@ -48,7 +51,7 @@ const Example = () => {
       <Nav>
         <NavItem>
           <NavLink {...makeProps(['Section 1'])}>
-            <NavIcon icon='warn' />
+            <NavIcon icon={WarnIcon} />
             <NavText>Section 1</NavText>
           </NavLink>
         </NavItem>
@@ -64,13 +67,13 @@ const Example = () => {
         </NavItem>
         <NavItem>
           <NavLink {...makeProps(['Section 2'])}>
-            <NavIcon icon='check' />
+            <NavIcon icon={CheckIcon} />
             <NavText>Section 2</NavText>
           </NavLink>
         </NavItem>
         <NavItem>
           <NavLink {...makeProps(['Section 3'])}>
-            <NavIcon icon='download' />
+            <NavIcon icon={DownloadIcon} />
             <NavText>Section 3</NavText>
           </NavLink>
         </NavItem>
diff --git a/react/SelectBox/SelectBox.jsx b/react/SelectBox/SelectBox.jsx
index 2e8d8b3f70..637f874159 100644
--- a/react/SelectBox/SelectBox.jsx
+++ b/react/SelectBox/SelectBox.jsx
@@ -9,6 +9,8 @@ import Icon from '../Icon'
 import CheckIcon from '../Icons/Check'
 import { dodgerBlue, silver, coolGrey, paleGrey } from '../palette'
 import withBreakpoints from '../helpers/withBreakpoints'
+import TopIcon from '../Icons/Top'
+import BottomIcon from '../Icons/Bottom'
 
 import styles from './styles.styl'
 import ControlDefault from './ControlDefault'
@@ -100,7 +102,7 @@ const DropdownIndicator = props => {
   return (
     <components.DropdownIndicator {...props}>
       <Icon
-        icon={props.selectProps.menuIsOpen ? 'top' : 'bottom'}
+        icon={props.selectProps.menuIsOpen ? TopIcon : BottomIcon}
         color={coolGrey}
         width="20"
         height="16"
diff --git a/react/SelectionBar/Readme.md b/react/SelectionBar/Readme.md
index 84135db615..fbad015631 100644
--- a/react/SelectionBar/Readme.md
+++ b/react/SelectionBar/Readme.md
@@ -6,6 +6,7 @@ SelectionBar
 import SelectionBar from 'cozy-ui/transpiled/react/SelectionBar';
 import I18n from 'cozy-ui/transpiled/react/I18n';
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 
 
 const selectedItem = {
@@ -33,7 +34,7 @@ const dictRequire = x => ({})
 const actions = {
   trash: {
     action: selections => alert(JSON.stringify(selections)),
-    icon: 'trash'
+    icon: TrashIcon
   },
   rename: {
     action: selections => alert(JSON.stringify(selections)),
diff --git a/react/Sidebar/Readme.md b/react/Sidebar/Readme.md
index 97133490d5..67a35c9134 100644
--- a/react/Sidebar/Readme.md
+++ b/react/Sidebar/Readme.md
@@ -17,6 +17,9 @@ In action :
 import Sidebar from 'cozy-ui/transpiled/react/Sidebar';
 import Nav, { NavItem, NavIcon, NavText, genNavLink } from 'cozy-ui/transpiled/react/Nav';
 import cx from 'classnames';
+import WarnIcon from 'cozy-ui/transpiled/react/Icons/Warn'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 
 const NavLink = genNavLink(({ children, className, active, activeClassName }) =>
   <a className={cx(className, active ? activeClassName : null)}>{ children }</a>);
@@ -25,19 +28,19 @@ const NavLink = genNavLink(({ children, className, active, activeClassName }) =>
   <Nav>
     <NavItem id='nav-item'>
       <NavLink active>
-        <NavIcon icon='warn' />
+        <NavIcon icon={WarnIcon} />
         <NavText>Warn</NavText>
       </NavLink>
     </NavItem>
     <NavItem>
       <NavLink>
-        <NavIcon icon='check' />
+        <NavIcon icon={CheckIcon} />
         <NavText>Check</NavText>
       </NavLink>
     </NavItem>
     <NavItem>
       <NavLink>
-        <NavIcon icon='download' />
+        <NavIcon icon={DownloadIcon} />
         <NavText>Download</NavText>
       </NavLink>
     </NavItem>
diff --git a/react/UploadQueue/Readme.md b/react/UploadQueue/Readme.md
index 6300c25207..caaca09325 100644
--- a/react/UploadQueue/Readme.md
+++ b/react/UploadQueue/Readme.md
@@ -11,6 +11,7 @@ the upload queue:
 
 ```
 import isTesting from '../helpers/isTesting'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 
 const initialState = {
   popover: false
@@ -54,7 +55,7 @@ const data = {
   <UploadQueue
     lang='fr'
     app='Cozy Drive'
-    getMimeTypeIcon={() => 'file'}
+    getMimeTypeIcon={() => FileIcon}
     queue={data.queue}
     doneCount={data.doneCount}
     successCount={data.successCount}
@@ -64,7 +65,7 @@ const data = {
     <UploadQueue
       lang='fr'
       app='Cozy Drive'
-      getMimeTypeIcon={() => 'file'}
+      getMimeTypeIcon={() => FileIcon}
       queue={data.queue}
       doneCount={data.doneCount}
       successCount={data.successCount}
diff --git a/react/Wizard/Readme.md b/react/Wizard/Readme.md
index effad23c40..a99b54dc63 100644
--- a/react/Wizard/Readme.md
+++ b/react/Wizard/Readme.md
@@ -13,8 +13,8 @@ import {
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Field from 'cozy-ui/transpiled/react/Field'
 import Button from 'cozy-ui/transpiled/react/Button';
-
-import NextIcon from "cozy-ui/transpiled/react/Icons/Next";
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous' 
+import NextIcon from 'cozy-ui/transpiled/react/Icons/Next';
 
 const t = x => x;
 const isTiny = false;
@@ -29,10 +29,10 @@ const WizardExample = ({ onNext, onRegister }) => {
         <WizardHeader>
           <WizardPreviousButton
             subtle
-            icon="previous"
+            icon={PreviousIcon}
             iconOnly
             extension="narrow"
-            onClick={null}
+            onClick={() => setState({ showExample: false })}
             type="button"
             label="Previous"
           />

From 8095e8549c2fda1ff01a53603f8d205601bee7d3 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 08:36:16 +0100
Subject: [PATCH 7/8] test: Update snapshots

---
 .../ShortcutViewer.spec.jsx.snap              |   6 +-
 react/__snapshots__/examples.spec.jsx.snap    | 337 ++++++++++--------
 2 files changed, 189 insertions(+), 154 deletions(-)

diff --git a/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap b/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap
index 72d81fac60..5f40867b66 100644
--- a/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap
+++ b/react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap
@@ -28,10 +28,12 @@ exports[`Shortcutviewer renders the component 1`] = `
           class="styles__icon___23x3R"
           focusable="false"
           height="16"
+          viewBox="0 0 16 16"
           width="16"
         >
-          <use
-            xlink:href="#openwith"
+          <path
+            d="M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z"
+            fill-rule="evenodd"
           />
         </svg>
         <span>
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index 403c3dd329..2da49e2bd1 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -9,12 +9,15 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
       <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\\">
         <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 1</div>
-            <div class=\\"styles__img___3SHpG u-mr-1\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--errorColor);\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#warning\\"></use>
+            <div class=\\"styles__img___3SHpG u-mr-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--errorColor);\\" width=\\"16\\" height=\\"16\\">
+                <path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
               </svg></div>
           </div>
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
@@ -22,8 +25,11 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 2</div>
           </div>
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">
               <p class=\\"MuiTypography-root-1 MuiTypography-body1-10 MuiTypography-gutterBottom-28\\">Item 3</p><span class=\\"MuiTypography-root-1 MuiTypography-caption-11 MuiTypography-colorTextSecondary-34\\">Descriptive text to elaborate on what item 3 does.</span>
@@ -45,20 +51,26 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = `
       <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\\">
         <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 1</div>
           </div>
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#right\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><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></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 2</div>
           </div>
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 3</div>
           </div>
@@ -78,8 +90,11 @@ exports[`ActionMenu should render examples: ActionMenu 3`] = `
       <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\\">
         <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 1</div>
           </div>
@@ -99,8 +114,11 @@ exports[`ActionMenu should render examples: ActionMenu 4`] = `
       <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\\">
         <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 1</div>
           </div>
@@ -120,8 +138,11 @@ exports[`ActionMenu should render examples: ActionMenu 5`] = `
       <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\\">
         <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
           <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
-            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-                <use xlink:href=\\"#file\\"></use>
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <defs>
+                  <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
+                </defs>
+                <use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use>
               </svg></div>
             <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 1</div>
           </div>
@@ -141,17 +162,17 @@ exports[`AppTitle should render examples: AppTitle 1`] = `
 exports[`Avatar should render examples: Avatar 1`] = `
 "<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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
       </svg></div>
     <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
-    <div class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#warning\\"></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=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
       </svg></div>
   </div>
 </div>"
@@ -160,13 +181,13 @@ exports[`Avatar should render examples: Avatar 1`] = `
 exports[`Avatar should render examples: Avatar 2`] = `
 "<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>
-    <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--disabled___xoLOy\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
       </svg></div>
     <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna styles__c-avatar--disabled___xoLOy\\" style=\\"color: black;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
   </div>
@@ -176,21 +197,21 @@ exports[`Avatar should render examples: Avatar 2`] = `
 exports[`Avatar should render examples: Avatar 3`] = `
 "<div>
   <div class=\\"u-flex\\">
-    <div class=\\"styles__c-avatar___PpDI-\\" style=\\"margin-left: -1rem;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#people\\"></use>
+    <div class=\\"styles__c-avatar___PpDI-\\" style=\\"margin-left: -1rem;\\"><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\\" style=\\"margin-left: -1rem;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
     <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--image___jDBci\\" style=\\"margin-left: -1rem;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
-    <div class=\\"styles__c-avatar___PpDI-\\" style=\\"margin-left: -1rem;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#link\\"></use>
+    <div class=\\"styles__c-avatar___PpDI-\\" style=\\"margin-left: -1rem;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+        <path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
       </svg></div>
-    <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--disabled___xoLOy\\" style=\\"margin-left: -1rem;\\"><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\\" style=\\"margin-left: -1rem;\\"><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\\" style=\\"margin-left: -1rem;\\"><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\\" style=\\"margin-left: -1rem;\\"><img src=\\"test-file-stub\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
-    <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--disabled___xoLOy\\" style=\\"margin-left: -1rem;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#link\\"></use>
+    <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--disabled___xoLOy\\" style=\\"margin-left: -1rem;\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+        <path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
       </svg></div>
   </div>
 </div>"
@@ -200,64 +221,64 @@ exports[`Avatar should render examples: Avatar 4`] = `
 "<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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
         </svg></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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
         </svg></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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
         </svg></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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
         </svg></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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
         </svg></div>
     </div>
     <hr>
     <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 class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-          <use xlink:href=\\"#link\\"></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=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
         </svg></div>
     </div>
   </div>
@@ -267,47 +288,50 @@ exports[`Avatar should render examples: Avatar 4`] = `
 exports[`Badge should render examples: Badge 1`] = `
 "<div>
   <div class=\\"u-m-1\\"><span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">error<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">dot<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">large<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">small<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> </div>
-  <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-medium-114 MuiBadge-colorPrimary-122 Component-colorPrimary-116\\">4</span></span></p>
+  <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-medium-114 MuiBadge-colorPrimary-122 Component-colorPrimary-116\\">4</span></span></p>
   <div class=\\"u-m-1\\"><span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">error<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">dot<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">large<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">small<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> </div>
-  <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-medium-114 MuiBadge-colorError-124 Component-colorError-118 MuiBadge-dot-126 Component-dot-119\\"></span></span></p>
+  <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-medium-114 MuiBadge-colorError-124 Component-colorError-118 MuiBadge-dot-126 Component-dot-119\\"></span></span></p>
   <div class=\\"u-m-1\\"><span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">error<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">dot<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">large<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> <span class=\\"MuiTypography-root-1 MuiTypography-button-12 u-dib\\">small<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></span> </div>
-  <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-medium-114 MuiBadge-colorPrimary-122 Component-colorPrimary-116\\">4</span></span></p>
+  <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-medium-114 MuiBadge-colorPrimary-122 Component-colorPrimary-116\\">4</span></span></p>
 </div>"
 `;
 
 exports[`Badge should render examples: Badge 2`] = `
 "<div>
   <p><span class=\\"MuiBadge-root-120 Component-root-108\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span>
-</div><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-qualifier-127 Component-bottom-110 Component-right-112 Component-medium-114\\"><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><use xlink:href=\\"#link\\"></use></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-small-115 MuiBadge-colorError-124 Component-colorError-118 MuiBadge-dot-126 Component-dot-119\\"></span></span></span></span></p>
+</div><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-qualifier-127 Component-bottom-110 Component-right-112 Component-medium-114\\"><span class=\\"MuiBadge-root-120 Component-root-108\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path></svg><span class=\\"MuiBadge-badge-121 Component-badge-107 Component-top-109 Component-right-112 Component-small-115 MuiBadge-colorError-124 Component-colorError-118 MuiBadge-dot-126 Component-dot-119\\"></span></span></span></span></p>
 </div>"
 `;
 
 exports[`BarButton should render examples: BarButton 1`] = `
 "<div>
-  <div class=\\"styles__BarButton___3z5Er styles__BarButton--disabled___5e3Ll\\"><svg class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#previous\\"></use>
+  <div class=\\"styles__BarButton___3z5Er styles__BarButton--disabled___5e3Ll\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <path d=\\"M3.414 7h11.58C15.548 7 16 7.444 16 8c0 .552-.45 1-1.007 1H3.414l5.293 5.293a1 1 0 01-1.414 1.414l-7-7a1 1 0 010-1.414l7-7a1 1 0 111.414 1.414L3.414 7z\\" fill-rule=\\"evenodd\\"></path>
     </svg></div>
 </div>"
 `;
 
 exports[`BarButton should render examples: BarButton 2`] = `
-"<div><a href=\\"http://cozy.io\\" class=\\"styles__BarButton___3z5Er\\"><svg class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#upload\\"></use>
+"<div><a href=\\"http://cozy.io\\" class=\\"styles__BarButton___3z5Er\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <path fill-rule=\\"evenodd\\" d=\\"M7 6.414L5.707 7.707a1 1 0 01-1.414-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L9 6.414V14a1 1 0 11-2 0V6.414zM1 2h14a1 1 0 100-2H1a1 1 0 100 2z\\"></path>
     </svg></a></div>"
 `;
 
 exports[`BarButton should render examples: BarButton 3`] = `
 "<div>
-  <div class=\\"styles__BarButton___3z5Er\\"><svg class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#cube\\"></use>
+  <div class=\\"styles__BarButton___3z5Er\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <path d=\\"M1 11.009V5.5c0-.55.39-.773.872-.498l5.256 3.003c.476.272.872.944.872 1.495v5.508c0 .549-.39.772-.872.497l-5.256-3.003C1.396 12.231 1 11.56 1 11.01zm15 0c0 .55-.396 1.222-.872 1.494l-5.256 3.003c-.481.275-.872.052-.872-.497V9.5c0-.55.396-1.223.872-1.495l5.256-3.003c.481-.275.872-.052.872.498v5.508zM9.35 6.982c-.47.288-1.237.284-1.7 0l-4.8-2.954c-.47-.29-.463-.732.027-.995L7.623.477c.485-.261 1.264-.264 1.754 0l4.746 2.556c.485.26.49.71.027.995l-4.8 2.954z\\"></path>
     </svg></div>
 </div>"
 `;
 
 exports[`BarButton should render examples: BarButton 4`] = `
 "<div>
-  <div class=\\"styles__BarButton___3z5Er\\"><svg class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#gear\\"></use>
+  <div class=\\"styles__BarButton___3z5Er\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__BarButtonIcon___1pSOT styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <g fill-rule=\\"evenodd\\">
+        <path d=\\"M14.25 7.078c.051.26.077.568.077.926 0 .358-.026.665-.078.925l1.62 1.333c.131.086.163.203.099.352-.325.95-.859 1.826-1.602 2.628-.104.124-.229.155-.37.094l-2.032-.668c-.52.396-1.08.705-1.68.926l-.409 2c-.026.146-.117.233-.273.258-.56.1-1.094.148-1.602.148a9.21 9.21 0 01-1.601-.148c-.157-.024-.248-.11-.274-.259l-.409-1.999a5.98 5.98 0 01-1.68-.926l-2.03.668c-.145.062-.268.03-.372-.094C.892 12.44.359 11.565.032 10.614c-.065-.148-.032-.266.098-.352L1.751 8.93a4.761 4.761 0 01-.078-.925c0-.358.026-.667.078-.926L.131 5.746C0 5.66-.034 5.542.031 5.394c.326-.95.86-1.826 1.602-2.627.104-.123.228-.154.371-.093l2.031.667a5.99 5.99 0 011.68-.926l.41-1.999c.025-.148.116-.234.273-.259a8.221 8.221 0 013.202 0c.156.024.247.111.273.26l.41 1.998c.6.223 1.159.53 1.68.926l2.03-.667c.143-.062.267-.03.371.093.742.802 1.276 1.678 1.602 2.627.064.148.032.266-.098.352l-1.62 1.332zM8 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z\\"></path>
+        <path d=\\"M14.25 7.078c.051.26.077.568.077.926 0 .358-.026.665-.078.925l1.62 1.333c.131.086.163.203.099.352-.325.95-.859 1.826-1.602 2.628-.104.124-.229.155-.37.094l-2.032-.668c-.52.396-1.08.705-1.68.926l-.409 2c-.026.146-.117.233-.273.258-.56.1-1.094.148-1.602.148a9.21 9.21 0 01-1.601-.148c-.157-.024-.248-.11-.274-.259l-.409-1.999a5.98 5.98 0 01-1.68-.926l-2.03.668c-.145.062-.268.03-.372-.094C.892 12.44.359 11.565.032 10.614c-.065-.148-.032-.266.098-.352L1.751 8.93a4.761 4.761 0 01-.078-.925c0-.358.026-.667.078-.926L.131 5.746C0 5.66-.034 5.542.031 5.394c.326-.95.86-1.826 1.602-2.627.104-.123.228-.154.371-.093l2.031.667a5.99 5.99 0 011.68-.926l.41-1.999c.025-.148.116-.234.273-.259a8.221 8.221 0 013.202 0c.156.024.247.111.273.26l.41 1.998c.6.223 1.159.53 1.68.926l2.03-.667c.143-.062.267-.03.371.093.742.802 1.276 1.678 1.602 2.627.064.148.032.266-.098.352l-1.62 1.332zM8 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z\\"></path>
+      </g>
     </svg></div>
 </div>"
 `;
@@ -407,26 +431,26 @@ exports[`Button should render examples: Button 9`] = `
 
 exports[`Button should render examples: Button 10`] = `
 "<div>
-  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#trash\\"></use></svg><span>delete</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--narrow___27FHD styles__c-btn--center___16_Xh\\" title=\\"See more\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#dots\\"></use></svg><span class=\\"u-visuallyhidden\\">See more</span></span></button></div>
+  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><g fill-rule=\\"evenodd\\"><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path></g></svg><span>delete</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--narrow___27FHD styles__c-btn--center___16_Xh\\" title=\\"See more\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill-rule=\\"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\\"></path></svg><span class=\\"u-visuallyhidden\\">See more</span></span></button></div>
 </div>"
 `;
 
 exports[`Button should render examples: Button 11`] = `
 "<div>
-  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" style=\\"fill: yellow;\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#trash\\"></use></svg><span>delete</span></span></button></div>
+  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: yellow;\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path></g></svg><span>delete</span></span></button></div>
 </div>"
 `;
 
 exports[`Button should render examples: Button 12`] = `
 "<div>
-  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Add\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span class=\\"u-visuallyhidden\\">Add</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Delete\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#cross\\"></use></svg><span class=\\"u-visuallyhidden\\">Delete</span></span></button></div>
+  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Add\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg><span class=\\"u-visuallyhidden\\">Add</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Delete\\"><span><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><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><span class=\\"u-visuallyhidden\\">Delete</span></span></button></div>
 </div>"
 `;
 
 exports[`Button should render examples: Button 13`] = `
 "<div>
   <div>
-    <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--tiny___1pFv6 styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"8\\" height=\\"8\\" aria-hidden=\\"true\\" focusable=\\"false\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></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 viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\" aria-hidden=\\"true\\" focusable=\\"false\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></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 viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></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 viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"18\\" height=\\"18\\" aria-hidden=\\"true\\" focusable=\\"false\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></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 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\\" role=\\"progressbar\\" aria-busy=\\"true\\">
@@ -442,8 +466,8 @@ exports[`Button should render examples: Button 13`] = `
           <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>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg viewBox=\\"0 0 52 52\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill=\\"#297EF2\\" fill-rule=\\"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\\"></path></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 viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg><span>Subtle Secondary Cozy</span></span></button></p>
   </div>
 </div>"
 `;
@@ -455,7 +479,7 @@ exports[`Button should render examples: Button 14`] = `
     <p><a href=\\"https://cozy.io\\" target=\\"_blank\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--small___3ArkI\\"><span><span>Link to Cozy.io</span></span></a></p>
     <p><a href=\\"https://cozy.io\\" target=\\"_blank\\" class=\\"styles__c-btn___-2Vnj\\"><span><span>Link to Cozy.io</span></span></a></p>
     <p><a href=\\"https://cozy.io\\" target=\\"_blank\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN\\"><span><span>Link to Cozy.io</span></span></a></p>
-    <p><a href=\\"https://cozy.io\\" target=\\"_blank\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#cozy\\"></use></svg><span>Link to Cozy.io</span></span></a></p>
+    <p><a href=\\"https://cozy.io\\" target=\\"_blank\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf\\"><span><svg viewBox=\\"0 0 52 52\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill=\\"#297EF2\\" fill-rule=\\"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\\"></path></svg><span>Link to Cozy.io</span></span></a></p>
   </div>
 </div>"
 `;
@@ -2149,8 +2173,8 @@ exports[`Dialog should render examples: Dialog 1`] = `"<div><button>Toggle modal
 exports[`Empty should render examples: Empty 1`] = `
 "<div>
   <div style=\\"position: relative; transform: translateZ(0); height: 500px; display: flex;\\">
-    <div class=\\"styles__c-empty___3w5oV\\"><svg class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\">
-        <use xlink:href=\\"#cozy\\"></use>
+    <div class=\\"styles__c-empty___3w5oV\\"><svg viewBox=\\"0 0 52 52\\" class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\">
+        <path fill=\\"#297EF2\\" fill-rule=\\"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\\"></path>
       </svg>
       <h3 class=\\"MuiTypography-root-1 MuiTypography-h3-15 MuiTypography-colorTextPrimary-33 MuiTypography-gutterBottom-28\\">This list is empty</h3>
       <p class=\\"MuiTypography-root-1 MuiTypography-body1-10 MuiTypography-colorTextSecondary-34 MuiTypography-gutterBottom-28\\">Try adding some content to this list</p>
@@ -2163,8 +2187,8 @@ exports[`Empty should render examples: Empty 1`] = `
 exports[`Empty should render examples: Empty 2`] = `
 "<div>
   <div style=\\"position: relative; transform: translateZ(0); height: 500px; display: flex;\\">
-    <div class=\\"styles__c-empty___3w5oV\\" id=\\"empty\\"><svg class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\">
-        <use xlink:href=\\"#cozy\\"></use>
+    <div class=\\"styles__c-empty___3w5oV\\" id=\\"empty\\"><svg viewBox=\\"0 0 52 52\\" class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\">
+        <path fill=\\"#297EF2\\" fill-rule=\\"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\\"></path>
       </svg>
       <h3 class=\\"MuiTypography-root-1 MuiTypography-h3-15 MuiTypography-colorTextPrimary-33 MuiTypography-gutterBottom-28\\">An error occured</h3>
       <p class=\\"MuiTypography-root-1 MuiTypography-body1-10 MuiTypography-colorTextSecondary-34 MuiTypography-gutterBottom-28\\">It's maybe nothing, just refresh to be sure</p>
@@ -2237,8 +2261,8 @@ exports[`Field should render examples: Field 7`] = `
             </div>
           </div>
           <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-                <use xlink:href=\\"#bottom\\"></use>
+            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <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></div>
           </div>
         </div>
@@ -2256,8 +2280,8 @@ exports[`Field should render examples: Field 7`] = `
             </div>
           </div>
           <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-                <use xlink:href=\\"#bottom\\"></use>
+            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <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></div>
           </div>
         </div>
@@ -2356,20 +2380,23 @@ exports[`Hero should render examples: Hero 1`] = `
   <div class=\\"styles__Hero___14z7_\\">
     <h2 class=\\" styles__Hero-title___256Uz\\">Connect your bank accounts</h2>
     <div class=\\" styles__Hero-sections___ETV6e\\">
-      <div class=\\" styles__Hero-section___1BcNz\\"><svg class=\\"styles__icon___23x3R\\" style=\\"color: rgb(245, 45, 45);\\" width=\\"80\\" height=\\"80\\">
-          <use xlink:href=\\"#warning\\"></use>
+      <div class=\\" styles__Hero-section___1BcNz\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"color: rgb(245, 45, 45);\\" width=\\"80\\" height=\\"80\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
         </svg>
         <h3 class=\\" styles__Hero-subtitle___1E_WG\\">Control your budget</h3>
         <p class=\\" \\">Summary of all your accounts at a glance</p>
       </div>
-      <div class=\\" styles__Hero-section___1BcNz\\"><svg class=\\"styles__icon___23x3R\\" style=\\"color: rgb(167, 91, 203);\\" width=\\"80\\" height=\\"80\\">
-          <use xlink:href=\\"#paperplane\\"></use>
+      <div class=\\" styles__Hero-section___1BcNz\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"color: rgb(167, 91, 203);\\" width=\\"80\\" height=\\"80\\">
+          <path d=\\"M16 0l-6 15-2.5-2.5L4 15l-1-4 10-8.5-10 6L0 6z\\" fill-rule=\\"evenodd\\"></path>
         </svg>
         <h3 class=\\" styles__Hero-subtitle___1E_WG\\">Save Time</h3>
         <p class=\\" \\">Your invoices at your fingertips directly from your statements</p>
       </div>
-      <div class=\\" styles__Hero-section___1BcNz\\"><svg class=\\"styles__icon___23x3R\\" style=\\"color: rgb(45, 138, 242);\\" width=\\"80\\" height=\\"80\\">
-          <use xlink:href=\\"#folder\\"></use>
+      <div class=\\" styles__Hero-section___1BcNz\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"color: rgb(45, 138, 242);\\" width=\\"80\\" height=\\"80\\">
+          <g fill-rule=\\"evenodd\\">
+            <path d=\\"M0 2.007C0 1.45.451 1 .99 1H5.51c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99C16 14.1 15.105 15 14.006 15H1.994A2 2 0 010 12.994V2.007zM0 5h16v1H0V5z\\"></path>
+            <path d=\\"M0 2.007C0 1.45.451 1 .99 1H5.51c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99C16 14.1 15.105 15 14.006 15H1.994A2 2 0 010 12.994V2.007zM0 5h16v1H0V5z\\"></path>
+          </g>
         </svg>
         <h3 class=\\" styles__Hero-subtitle___1E_WG\\">Cozy is working for you</h3>
         <p class=\\" \\">Automatic follow-up of your medical expenses</p>
@@ -2386,7 +2413,7 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
     <div class=\\"u-media u-media-grow u-row-m\\">
       <div class=\\"styles__HistoryRowCircleWrapper___3r8Uo\\">
         <div class=\\"styles__img___3SHpG styles__HistoryRowMediaImg___1J9OI\\">
-          <div class=\\"styles__c-circle___1DuMR styles__HistoryRowCircle___4FWWa\\"><span class=\\"styles__c-circle-text___1jFgD\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--primaryTextColor);\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#file\\"></use></svg></span></div>
+          <div class=\\"styles__c-circle___1DuMR styles__HistoryRowCircle___4FWWa\\"><span class=\\"styles__c-circle-text___1jFgD\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--primaryTextColor);\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path></defs><use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></div>
         </div>
       </div>
       <div class=\\"u-media u-media-grow u-stack-xs u-row-m\\">
@@ -2422,7 +2449,7 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
     <div class=\\"u-media u-media-grow u-row-m\\">
       <div class=\\"styles__HistoryRowCircleWrapper___3r8Uo\\">
         <div class=\\"styles__img___3SHpG styles__HistoryRowMediaImg___1J9OI\\">
-          <div class=\\"styles__c-circle___1DuMR styles__HistoryRowCircle___4FWWa\\"><span class=\\"styles__c-circle-text___1jFgD\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--primaryTextColor);\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#file\\"></use></svg></span></div>
+          <div class=\\"styles__c-circle___1DuMR styles__HistoryRowCircle___4FWWa\\"><span class=\\"styles__c-circle-text___1jFgD\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--primaryTextColor);\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path></defs><use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></div>
         </div>
       </div>
       <div class=\\"u-media u-media-grow u-stack-xs u-row-m\\">
@@ -2494,7 +2521,7 @@ exports[`HistoryRow should render examples: HistoryRow 1`] = `
     <div class=\\"u-media u-media-grow u-row-m\\">
       <div class=\\"styles__HistoryRowCircleWrapper___3r8Uo\\">
         <div class=\\"styles__img___3SHpG styles__HistoryRowMediaImg___1J9OI\\">
-          <div class=\\"styles__c-circle___1DuMR styles__HistoryRowCircle___4FWWa\\"><span class=\\"styles__c-circle-text___1jFgD\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--primaryTextColor);\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#file\\"></use></svg></span></div>
+          <div class=\\"styles__c-circle___1DuMR styles__HistoryRowCircle___4FWWa\\"><span class=\\"styles__c-circle-text___1jFgD\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--primaryTextColor);\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path></defs><use xlink:href=\\"#file_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></div>
         </div>
       </div>
       <div class=\\"u-media u-media-grow u-stack-xs u-row-m\\">
@@ -5349,18 +5376,19 @@ exports[`Icon should render examples: Icon 2`] = `
 
 exports[`Icon should render examples: Icon 3`] = `
 "<div>
-  <div><svg class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: #0bda51;\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#spinner\\"></use>
-    </svg>&nbsp;<svg class=\\"styles__icon___23x3R\\" style=\\"fill: #c30017; transform: rotate(45deg);\\" width=\\"16\\" height=\\"16\\">
-      <use xlink:href=\\"#right\\"></use>
+  <div><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" style=\\"fill: #0bda51;\\" width=\\"16\\" height=\\"16\\" role=\\"progressbar\\" aria-busy=\\"true\\">
+      <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>&nbsp;<svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: #c30017; transform: rotate(45deg);\\" 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></div>
 </div>"
 `;
 
 exports[`Icon should render examples: Icon 4`] = `
 "<div>
-  <div><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--errorColor);\\" width=\\"32\\" height=\\"32\\">
-      <use xlink:href=\\"#warning\\"></use>
+  <div><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--errorColor);\\" width=\\"32\\" height=\\"32\\">
+      <path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
     </svg><span>← Click it</span></div>
 </div>"
 `;
@@ -6615,11 +6643,16 @@ exports[`IconButton should render examples: IconButton 1`] = `
 
 exports[`IconStack should render examples: IconStack 1`] = `
 "<div>
-  <div class=\\"styles__IconStack-wrapper___10dhG\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: blue;\\" width=\\"32\\" height=\\"32\\">
-      <use xlink:href=\\"#file-duotone\\"></use>
+  <div class=\\"styles__IconStack-wrapper___10dhG\\"><svg viewBox=\\"0 0 26 32\\" class=\\"styles__icon___23x3R\\" style=\\"fill: blue;\\" width=\\"32\\" height=\\"32\\">
+      <g fill-rule=\\"evenodd\\">
+        <path d=\\"M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z\\" fill=\\"#FFF\\"></path>
+        <path d=\\"M18.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z\\" fill=\\"#FFF\\"></path>
+        <path d=\\"M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z\\" opacity=\\"0.242\\"></path>
+        <path d=\\"M18.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z\\"></path>
+      </g>
     </svg>
-    <div class=\\"styles__IconStack-foregroundIcon___ZvY-t\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: red;\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#bank\\"></use>
+    <div class=\\"styles__IconStack-foregroundIcon___ZvY-t\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: red;\\" width=\\"16\\" height=\\"16\\">
+        <path fill-rule=\\"evenodd\\" d=\\"M7.979 0L0 5.066v1.966h15.958V5.066L7.979 0zm4 13.063h2v-5h-2v5zm-5 0h2v-5h-2v5zm-5 0h2v-5h-2v5zm-1.979 3h15.958v-2H0v2z\\"></path>
       </svg></div>
   </div>
 </div>"
@@ -6797,8 +6830,8 @@ exports[`InputGroup should render examples: InputGroup 4`] = `
                 </div>
               </div>
               <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-                <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-                    <use xlink:href=\\"#bottom\\"></use>
+                <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                    <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></div>
               </div>
             </div>
@@ -6914,8 +6947,8 @@ exports[`ListItemText should render examples: ListItemText 3`] = `
 exports[`Media should render examples: Media 1`] = `
 "<div>
   <div class=\\"styles__media___cSJMp\\">
-    <div class=\\"styles__img___3SHpG\\" style=\\"padding-right: 1rem;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#people\\"></use>
+    <div class=\\"styles__img___3SHpG\\" style=\\"padding-right: 1rem;\\"><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__bd___1Uv-F\\">
       <p class=\\"MuiTypography-root-1 MuiTypography-body1-10\\">Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</p>
@@ -6927,8 +6960,8 @@ exports[`Media should render examples: Media 1`] = `
 exports[`Media should render examples: Media 2`] = `
 "<div>
   <div class=\\"styles__media___cSJMp styles__media--top___K9w0I\\">
-    <div class=\\"styles__img___3SHpG\\" style=\\"padding-right: 1rem;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#people\\"></use>
+    <div class=\\"styles__img___3SHpG\\" style=\\"padding-right: 1rem;\\"><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__bd___1Uv-F\\">
       <p class=\\"MuiTypography-root-1 MuiTypography-body1-10\\">Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</p>
@@ -6940,8 +6973,8 @@ exports[`Media should render examples: Media 2`] = `
 exports[`Media should render examples: Media 3`] = `
 "<div>
   <div class=\\"styles__media___cSJMp styles__media--bottom___21YWJ\\">
-    <div class=\\"styles__img___3SHpG\\" style=\\"padding-right: 1rem;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <use xlink:href=\\"#people\\"></use>
+    <div class=\\"styles__img___3SHpG\\" style=\\"padding-right: 1rem;\\"><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__bd___1Uv-F\\">
       <p class=\\"MuiTypography-root-1 MuiTypography-body1-10\\">Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</p>
@@ -6959,8 +6992,8 @@ exports[`Menu should render examples: Menu 1`] = `
       <hr>
       <div data=\\"hola\\" class=\\"styles__c-menu__item___1sXjs\\">
         <div class=\\"styles__media___cSJMp styles__media--top___K9w0I\\">
-          <div class=\\"styles__img___3SHpG styles__c-menu__item-icon___kzdkW\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-              <use xlink:href=\\"#paperplane\\"></use>
+          <div class=\\"styles__img___3SHpG styles__c-menu__item-icon___kzdkW\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+              <path d=\\"M16 0l-6 15-2.5-2.5L4 15l-1-4 10-8.5-10 6L0 6z\\" fill-rule=\\"evenodd\\"></path>
             </svg></div>
           <div class=\\"styles__bd___1Uv-F\\">
             <div>¡Hola!</div>
@@ -7115,8 +7148,8 @@ exports[`SelectBox should render examples: SelectBox 1`] = `
           </div>
         </div>
         <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-              <use xlink:href=\\"#bottom\\"></use>
+          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+              <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></div>
         </div>
       </div>
@@ -7138,8 +7171,8 @@ exports[`SelectBox should render examples: SelectBox 2`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#top\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
@@ -7166,8 +7199,8 @@ exports[`SelectBox should render examples: SelectBox 3`] = `
           </div>
         </div>
         <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-              <use xlink:href=\\"#bottom\\"></use>
+          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+              <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></div>
         </div>
       </div>
@@ -7189,8 +7222,8 @@ exports[`SelectBox should render examples: SelectBox 4`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#bottom\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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></div>
       </div>
     </div>
@@ -7211,8 +7244,8 @@ exports[`SelectBox should render examples: SelectBox 5`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#bottom\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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></div>
       </div>
     </div>
@@ -7234,8 +7267,8 @@ exports[`SelectBox should render examples: SelectBox 6`] = `
           </div>
         </div>
         <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-              <use xlink:href=\\"#bottom\\"></use>
+          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+              <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></div>
         </div>
       </div>
@@ -7259,8 +7292,8 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
             </div>
           </div>
           <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-                <use xlink:href=\\"#bottom\\"></use>
+            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <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></div>
           </div>
         </div>
@@ -7278,8 +7311,8 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
             </div>
           </div>
           <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-                <use xlink:href=\\"#bottom\\"></use>
+            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <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></div>
           </div>
         </div>
@@ -7297,8 +7330,8 @@ exports[`SelectBox should render examples: SelectBox 7`] = `
             </div>
           </div>
           <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-                <use xlink:href=\\"#bottom\\"></use>
+            <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+                <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></div>
           </div>
         </div>
@@ -7322,8 +7355,8 @@ exports[`SelectBox should render examples: SelectBox 8`] = `
           </div>
         </div>
         <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-              <use xlink:href=\\"#bottom\\"></use>
+          <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+              <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></div>
         </div>
       </div>
@@ -7345,8 +7378,8 @@ exports[`SelectBox should render examples: SelectBox 9`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#bottom\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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></div>
       </div>
     </div>
@@ -7367,8 +7400,8 @@ exports[`SelectBox should render examples: SelectBox 10`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#bottom\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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></div>
       </div>
     </div>
@@ -7389,8 +7422,8 @@ exports[`SelectBox should render examples: SelectBox 11`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#top\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
@@ -7449,8 +7482,8 @@ exports[`SelectBox should render examples: SelectBox 12`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6\\"><span class=\\"css-1hyfx7x\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#bottom\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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></div>
       </div>
     </div>
@@ -7471,8 +7504,8 @@ exports[`SelectBox should render examples: SelectBox 13`] = `
         </div>
       </div>
       <div class=\\"css-1wy0on6 needsclick cz__indicators\\"><span class=\\"css-1hyfx7x needsclick cz__indicator-separator\\"></span>
-        <div aria-hidden=\\"true\\" class=\\"css-n6ypum needsclick cz__indicator needsclick cz__dropdown-indicator\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
-            <use xlink:href=\\"#top\\"></use>
+        <div aria-hidden=\\"true\\" class=\\"css-n6ypum needsclick cz__indicator needsclick cz__dropdown-indicator\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--coolGrey);\\" width=\\"20\\" height=\\"16\\">
+            <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-rule=\\"evenodd\\"></path>
           </svg></div>
       </div>
     </div>
@@ -7492,9 +7525,9 @@ exports[`Sidebar should render examples: Sidebar 1`] = `
   <aside class=\\"styles__o-sidebar___1295j\\" id=\\"sidebar\\">
     <nav role=\\"navigation\\">
       <ul class=\\"styles__c-nav___33dZy\\">
-        <li class=\\"styles__c-nav-item___3XOLK\\" id=\\"nav-item\\"><a class=\\"styles__c-nav-link___3mK6W styles__is-active___2D0jN\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#warn\\"></use></svg></span><span class=\\"styles__c-nav-text___1J3yU\\">Warn</span></a></li>
-        <li class=\\"styles__c-nav-item___3XOLK\\"><a class=\\"styles__c-nav-link___3mK6W\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#check\\"></use></svg></span><span class=\\"styles__c-nav-text___1J3yU\\">Check</span></a></li>
-        <li class=\\"styles__c-nav-item___3XOLK\\"><a class=\\"styles__c-nav-link___3mK6W\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#download\\"></use></svg></span><span class=\\"styles__c-nav-text___1J3yU\\">Download</span></a></li>
+        <li class=\\"styles__c-nav-item___3XOLK\\" id=\\"nav-item\\"><a class=\\"styles__c-nav-link___3mK6W styles__is-active___2D0jN\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zm-1.503-34.897c.83-1.438 2.175-1.44 3.007 0l9.992 17.294c.83 1.438.16 2.603-1.504 2.603H14.008c-1.661 0-2.336-1.162-1.504-2.603l9.993-17.294zm.082 5.323A1.334 1.334 0 0123.93 17h.141c.79 0 1.395.633 1.35 1.426l-.365 6.576c-.03.551-.499.998-1.055.998a1.069 1.069 0 01-1.055-.998l-.366-6.576zM22.5 29c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z\\"></path></svg></span><span class=\\"styles__c-nav-text___1J3yU\\">Warn</span></a></li>
+        <li class=\\"styles__c-nav-item___3XOLK\\"><a class=\\"styles__c-nav-link___3mK6W\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M1.707 10.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l11-11a1 1 0 00-1.414-1.414L4 12.586l-2.293-2.293z\\"></path></svg></span><span class=\\"styles__c-nav-text___1J3yU\\">Check</span></a></li>
+        <li class=\\"styles__c-nav-item___3XOLK\\"><a class=\\"styles__c-nav-link___3mK6W\\"><span class=\\"styles__c-nav-icon___hrJUe\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><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></span><span class=\\"styles__c-nav-text___1J3yU\\">Download</span></a></li>
       </ul>
     </nav>
   </aside>
@@ -7706,7 +7739,7 @@ exports[`Wizard should render examples: Wizard 1`] = `
 "<div><button>Show wizard</button><br>
   <div class=\\"styles__wizard___m6AMR\\">
     <div class=\\"styles__wizard-wrapper___38V4s\\">
-      <header class=\\"styles__wizard-header___2_r05\\"><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--narrow___27FHD styles__c-btn--center___16_Xh styles__wizard-previous___2StGt\\" title=\\"Previous\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#previous\\"></use></svg><span class=\\"u-visuallyhidden\\">Previous</span></span></button>
+      <header class=\\"styles__wizard-header___2_r05\\"><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--narrow___27FHD styles__c-btn--center___16_Xh styles__wizard-previous___2StGt\\" title=\\"Previous\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M3.414 7h11.58C15.548 7 16 7.444 16 8c0 .552-.45 1-1.007 1H3.414l5.293 5.293a1 1 0 01-1.414 1.414l-7-7a1 1 0 010-1.414l7-7a1 1 0 111.414 1.414L3.414 7z\\" fill-rule=\\"evenodd\\"></path></svg><span class=\\"u-visuallyhidden\\">Previous</span></span></button>
         <h1 class=\\"u-title-h1 styles__wizard-title___11Dzr\\">Connect to your Cozy</h1>
       </header>
       <div class=\\"styles__wizard-main___ObvId\\">
@@ -7714,8 +7747,8 @@ exports[`Wizard should render examples: Wizard 1`] = `
         <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Password</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\"></div>
         <p class=\\"styles__wizard-errors___1ufSE u-error\\">There is an error</p>
       </div>
-      <footer class=\\"styles__wizard-footer___-ZrgM u-pb-2\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--center___16_Xh styles__wizard-next___38lPl\\"><span><span>Next step</span><svg class=\\"styles__icon___23x3R\\" style=\\"fill: white;\\" width=\\"16\\" height=\\"16\\">
-            <use xlink:href=\\"#next\\"></use>
+      <footer class=\\"styles__wizard-footer___-ZrgM u-pb-2\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--center___16_Xh styles__wizard-next___38lPl\\"><span><span>Next step</span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: white;\\" width=\\"16\\" height=\\"16\\">
+            <path d=\\"M12.586 7H1.006C.452 7 0 7.444 0 8c0 .552.45 1 1.007 1h11.579l-5.293 5.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7a1 1 0 10-1.414 1.414L12.586 7z\\" fill-rule=\\"evenodd\\"></path>
           </svg></span></button><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--large___2gatN styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Register an account</span></span></button></footer>
     </div>
   </div>

From b9da2829a23d1508ede05812098d052812bece46 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 3 Feb 2021 13:13:27 +0100
Subject: [PATCH 8/8] fix: Use svgr icons in examples

---
 react/SelectionBar/Readme.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/react/SelectionBar/Readme.md b/react/SelectionBar/Readme.md
index fbad015631..d4392096e3 100644
--- a/react/SelectionBar/Readme.md
+++ b/react/SelectionBar/Readme.md
@@ -7,7 +7,7 @@ import SelectionBar from 'cozy-ui/transpiled/react/SelectionBar';
 import I18n from 'cozy-ui/transpiled/react/I18n';
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
-
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
 
 const selectedItem = {
     _id: 1,
@@ -38,7 +38,8 @@ const actions = {
   },
   rename: {
     action: selections => alert(JSON.stringify(selections)),
-    displayCondition: selections => selections.length > 1
+    displayCondition: selections => selections.length > 1,
+    icon: RenameIcon
   }
 };