cozy-ui-plus 8.0.0 → 9.0.0

package/src/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -1,17 +1,19 @@
+import {
+  Icon,
+  Bottom,
+  Calendar,
+  Cloud,
+  Comment,
+  Company,
+  Email,
+  Location,
+  Matrix,
+  People,
+  Relationship,
+  Telephone
+} from '@linagora/twake-icons'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
-import CalendarIcon from 'cozy-ui/transpiled/react/Icons/Calendar'
-import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
-import CommentIcon from 'cozy-ui/transpiled/react/Icons/Comment'
-import CompanyIcon from 'cozy-ui/transpiled/react/Icons/Company'
-import EmailIcon from 'cozy-ui/transpiled/react/Icons/Email'
-import LocationIcon from 'cozy-ui/transpiled/react/Icons/Location'
-import MatrixIcon from 'cozy-ui/transpiled/react/Icons/Matrix'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import RelationshipIcon from 'cozy-ui/transpiled/react/Icons/Relationship'
-import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
 import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
 
 import TextFieldPhone from './TextFieldPhone/index'
@@ -22,7 +24,7 @@ import TextFieldPhone from './TextFieldPhone/index'
 export const fields = [
   {
     name: 'gender',
-    icon: PeopleIcon,
+    icon: People,
     select: true,
     options: [
       {
@@ -62,7 +64,7 @@ export const fields = [
   },
   {
     name: 'company',
-    icon: CompanyIcon,
+    icon: Company,
     type: 'text',
     layout: 'accordion',
     subFields: [
@@ -75,7 +77,7 @@ export const fields = [
   },
   {
     name: 'phone',
-    icon: TelephoneIcon,
+    icon: Telephone,
     type: 'tel',
     layout: 'array',
     component: TextFieldPhone,
@@ -119,7 +121,7 @@ export const fields = [
   },
   {
     name: 'email',
-    icon: EmailIcon,
+    icon: Email,
     type: 'email',
     layout: 'array',
     label: {
@@ -146,12 +148,12 @@ export const fields = [
   },
   {
     name: 'matrix',
-    icon: MatrixIcon,
+    icon: Matrix,
     type: 'text'
   },
   {
     name: 'address',
-    icon: LocationIcon,
+    icon: Location,
     type: 'text',
     layout: 'array',
     InputProps: {
@@ -243,13 +245,13 @@ export const fields = [
   },
   {
     name: 'note',
-    icon: CommentIcon,
+    icon: Comment,
     type: 'text',
     multiline: true
   },
   {
     name: 'cozy',
-    icon: CloudIcon,
+    icon: Cloud,
     type: 'url',
     isSecondary: true,
     label: {
@@ -276,7 +278,7 @@ export const fields = [
   },
   {
     name: 'birthday',
-    icon: CalendarIcon,
+    icon: Calendar,
     type: 'date',
     isSecondary: true,
     InputLabelProps: { shrink: true }
@@ -289,14 +291,14 @@ export const fields = [
   },
   {
     name: 'relatedContact',
-    icon: RelationshipIcon,
+    icon: Relationship,
     layout: 'array',
     isSecondary: true,
     InputProps: {
       readOnly: true,
       endAdornment: (
         <InputAdornment position="end">
-          <Icon icon={BottomIcon} color="var(--iconTextColor)" />
+          <Icon icon={Bottom} color="var(--iconTextColor)" />
         </InputAdornment>
       )
     },

package/src/Contacts/AddModal/types.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types'
 
-import { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-
 /**
  * @typedef {'text'|'tel'|'email'|'button'|'url'|'date'} FieldType
  */
@@ -64,7 +62,11 @@ export const labelPropTypes = PropTypes.shape({
 
 export const fieldInputAttributesTypes = PropTypes.shape({
   name: PropTypes.string,
-  icon: iconPropType,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func
+  ]),
   type: PropTypes.string,
   label: labelPropTypes,
   layout: PropTypes.string,

package/src/Contacts/GroupsSelect/GroupCreation.jsx

@@ -1,8 +1,7 @@
+import { Icon, Plus } from '@linagora/twake-icons'
 import classNames from 'classnames'
 import React, { Component } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import Input from 'cozy-ui/transpiled/react/legacy/Input'
 import { translate } from 'twake-i18n'
 
@@ -66,7 +65,7 @@ class GroupCreation extends Component {
               onClick={this.handleClick}
               className={styles['contact-group-create-div-icon']}
             >
-              <Icon icon={PlusIcon} />
+              <Icon icon={Plus} />
               <span className="u-pl-half">
                 {t('Contacts.GroupsSelect.create')}
               </span>

package/src/Contacts/GroupsSelect/SelectBox/Control.jsx

@@ -1,9 +1,8 @@
+import { Icon, BottomSelect } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from '../locales'
@@ -24,7 +23,7 @@ const Control = ({
         onClick={onControlClicked}
         onTouchStart={onControlClicked}
         label={t('Contacts.GroupsSelect.manage')}
-        startIcon={<Icon icon={BottomSelectIcon} width="12" />}
+        startIcon={<Icon icon={BottomSelect} width="12" />}
       />
     </div>
   )

package/src/Contacts/Header/ImportDropdown.jsx

@@ -1,11 +1,9 @@
+import { Icon, Bottom, Team } from '@linagora/twake-icons'
 import React, { useState, useRef } from 'react'
 
 import { useClient, generateWebLink } from 'cozy-client'
 import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
-import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
 import Link from 'cozy-ui/transpiled/react/Link'
 import ActionMenu, {
   ActionMenuItem
@@ -37,7 +35,7 @@ const ImportDropdown = ({ onContactImport }) => {
         ref={anchorRef}
         variant="secondary"
         label={t('Contacts.Header.import.title')}
-        endIcon={<Icon icon={BottomIcon} />}
+        endIcon={<Icon icon={Bottom} />}
         fullWidth
         onClick={() => setShowMenu(v => !v)}
       />
@@ -48,10 +46,7 @@ const ImportDropdown = ({ onContactImport }) => {
           popperOptions={{ placement: 'bottom-end' }}
           onClose={() => setShowMenu(false)}
         >
-          <ActionMenuItem
-            left={<Icon icon={TeamIcon} />}
-            onClick={onContactImport}
-          >
+          <ActionMenuItem left={<Icon icon={Team} />} onClick={onContactImport}>
             {t('Contacts.Header.import.vcard')}
           </ActionMenuItem>
 

package/src/Contacts/Header/index.jsx

@@ -1,10 +1,9 @@
+import { Icon, PersonAdd } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PersonAddIcon from 'cozy-ui/transpiled/react/Icons/PersonAdd'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
@@ -37,7 +36,7 @@ const Header = ({
         <Button
           className="u-mr-half"
           variant="ghost"
-          startIcon={<Icon icon={PersonAddIcon} />}
+          startIcon={<Icon icon={PersonAdd} />}
           label={t('Contacts.Header.create')}
           fullWidth
           onClick={onContactCreate}

package/src/ContactsListModal/AddContact/AddContactContent.jsx

@@ -1,8 +1,7 @@
+import { Icon, People } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
@@ -21,7 +20,7 @@ const AddContactContent = ({ t, setContactValues }) => {
       <Typography variant="h5">{t('coordinates')}</Typography>
       <Media>
         <Img className={styles.icon}>
-          <Icon icon={PeopleIcon} />
+          <Icon icon={People} />
         </Img>
         <Bd className="u-mr-1">
           <TextField

package/src/ContactsListModal/ContactsListModal.jsx

@@ -1,3 +1,4 @@
+import { Icon, Plus } from '@linagora/twake-icons'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -10,8 +11,6 @@ import {
   useCozyDialog
 } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { DialogTitle, DialogContent } from 'cozy-ui/transpiled/react/Dialog'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import useEventListener from 'cozy-ui/transpiled/react/hooks/useEventListener'
 import useRealtime from 'cozy-ui/transpiled/react/hooks/useRealtime'
@@ -97,9 +96,9 @@ const ContactsListModal = ({
               className={isMobile && 'u-mt-1'}
               variant="secondary"
               theme="secondary"
-              label={selfAddContactLabel || <Icon icon={PlusIcon} />}
+              label={selfAddContactLabel || <Icon icon={Plus} />}
               {...(selfAddContactLabel && {
-                startIcon: <Icon icon={PlusIcon} />
+                startIcon: <Icon icon={Plus} />
               })}
               onClick={setShowAddDialog}
             />

package/src/ContactsListModal/MobileHeader.jsx

@@ -1,9 +1,8 @@
+import { Icon, Previous } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
 import Input from 'cozy-ui/transpiled/react/Input'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
@@ -20,7 +19,7 @@ const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
       style={barStyle}
     >
       <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
-        <Icon icon={PreviousIcon} />
+        <Icon icon={Previous} />
       </IconButton>
       <Input
         type="text"

package/src/Dialogs/AuthentificationDialog/index.jsx

@@ -1,10 +1,10 @@
+import { CozyAuthentification } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useMemo, useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import PermissionDialog from 'cozy-ui/transpiled/react/CozyDialogs/PermissionDialog'
-import CozyAuthentificationIcon from 'cozy-ui/transpiled/react/Icons/CozyAuthentification'
 import PasswordField from 'cozy-ui/transpiled/react/PasswordField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
@@ -49,7 +49,7 @@ const AuthentificationDialog = ({
       open
       onClose={onClose}
       title={t(`authentification-dialog.${isOIDC ? 'title-oidc' : 'title'}`)}
-      icon={CozyAuthentificationIcon}
+      icon={CozyAuthentification}
       content={
         <form onSubmit={handleSubmit}>
           <Typography variant="body1" className="u-ta-center">

package/src/FilePicker/FilePickerBodyItem.jsx

@@ -1,3 +1,4 @@
+import { Icon, FileTypeFolder, FileTypeText } from '@linagora/twake-icons'
 import cx from 'classnames'
 import filesize from 'filesize'
 import PropTypes from 'prop-types'
@@ -6,9 +7,6 @@ import React from 'react'
 import { models } from 'cozy-client'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import Divider from 'cozy-ui/transpiled/react/Divider'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileTypeFolder from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
-import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'

package/src/FilePicker/FilePickerBreadcrumb.jsx

@@ -1,8 +1,7 @@
+import { Icon, Right } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { Fragment, useCallback, memo } from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
@@ -33,7 +32,7 @@ const FilePickerBreadcrumb = ({ path, onBreadcrumbClick }) => {
                       {folder.name}
                     </span>
                     <Icon
-                      icon={RightIcon}
+                      icon={Right}
                       className={styles['filePickerBreadcrumb-icon']}
                     />
                   </Fragment>

package/src/FilePicker/FilePickerHeader.jsx

@@ -1,12 +1,11 @@
+import { Icon, Previous } from '@linagora/twake-icons'
 import get from 'lodash/get'
 import uniqBy from 'lodash/uniqBy'
 import PropTypes from 'prop-types'
 import React, { useCallback, memo } from 'react'
 
 import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import Previous from 'cozy-ui/transpiled/react/Icons/Previous'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import { ROOT_DIR_ID } from '.'

package/src/ListItem/ExpandedAttributes/ExpandedAttribute.jsx

@@ -1,8 +1,7 @@
+import { Icon, Copy } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
@@ -21,7 +20,7 @@ const ExpandedAttribute = ({ label, value, setAlertProps }) => {
       onClick={copyToClipboard({ value, setAlertProps, t })}
     >
       <ListItemIcon>
-        <Icon icon={CopyIcon} />
+        <Icon icon={Copy} />
       </ListItemIcon>
       <ListItemText
         primary={<Typography variant="caption">{label}</Typography>}

package/src/ListItem/ListItemBase/index.jsx

@@ -1,12 +1,11 @@
+import { Icon, Dots } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
@@ -58,7 +57,7 @@ const ListItemBase = ({
         {actions && !isSelectActive && (
           <ListItemSecondaryAction>
             <IconButton ref={anchorRef} onClick={toggleMenu}>
-              <Icon icon={DotsIcon} />
+              <Icon icon={Dots} />
             </IconButton>
           </ListItemSecondaryAction>
         )}

package/src/ListItem/ListItemContact/index.jsx

@@ -1,10 +1,9 @@
+import { Icon, Contacts } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getDisplayName } from 'cozy-client/dist/models/contact'
 import Filename from 'cozy-ui/transpiled/react/Filename'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import ContactsIcon from 'cozy-ui/transpiled/react/Icons/Contacts'
 
 import useActions from './useActions'
 import ListItemBase from '../ListItemBase'
@@ -22,7 +21,7 @@ const ListItemContact = ({
   const defaultActions = useActions(contact)
   const primaryText = primary || getDisplayName(contact)
   const secondaryText = secondary || contact.email?.[0]?.address
-  const itemIcon = icon || <Icon icon={ContactsIcon} width="32" height="32" />
+  const itemIcon = icon || <Icon icon={Contacts} width="32" height="32" />
 
   const itemActions = defaultActions.concat(actions)
 
@@ -34,7 +33,7 @@ const ListItemContact = ({
       icon={itemIcon}
       actions={itemActions}
       actionMenuComp={{
-        Header: <Filename icon={ContactsIcon} filename={primaryText} />
+        Header: <Filename icon={Contacts} filename={primaryText} />
       }}
       selectProps={selectProps}
       expandedAttributesProps={expandedAttributesProps}

package/src/ListItem/ListItemFile/ItemIcon.jsx

@@ -1,11 +1,9 @@
+import { Icon, FileTypeNote, FileTypeText } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
 import { isNote } from 'cozy-client/dist/models/file'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FiletypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
-import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
 
 import FileImageLoader from '../../FileImageLoader'
@@ -42,7 +40,7 @@ const ItemIcon = ({ icon, file }) => {
       }}
       renderFallback={() => (
         <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
-          <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
+          <Icon icon={isNote(file) ? FileTypeNote : FileTypeText} />
         </div>
       )}
     />

package/src/ListItem/ListItemFile/index.jsx

@@ -1,9 +1,9 @@
+import { FileTypePdf } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 import Filename from 'cozy-ui/transpiled/react/Filename'
-import FiletypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
 
 import ItemIcon from './ItemIcon'
 import PrimaryText from './PrimaryText'
@@ -35,7 +35,7 @@ const ListItemFile = ({
       actionMenuComp={{
         Header: (
           <Filename
-            icon={FiletypePdfIcon}
+            icon={FileTypePdf}
             filename={filename}
             extension={extension}
           />

package/src/Paywall/Paywall.jsx

@@ -1,3 +1,4 @@
+import { Icon, CozyUpgrade } from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 
@@ -7,8 +8,6 @@ import { isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { IllustrationDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CozyUpgradeIcon from 'cozy-ui/transpiled/react/Icons/CozyUpgrade'
 import Markdown from 'cozy-ui/transpiled/react/Markdown'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -77,7 +76,7 @@ const Paywall = ({
       actionsLayout="column"
       title={
         <div className="u-flex u-flex-column u-flex-items-center">
-          <Icon icon={CozyUpgradeIcon} width={128} height={128} />
+          <Icon icon={CozyUpgrade} width={128} height={128} />
           <Typography variant="h3" className="u-mt-1">
             {t(`${variant}Paywall.${type}.title`)}
           </Typography>

package/src/Qualification/QualificationGrid/index.jsx

@@ -1,17 +1,19 @@
+import {
+  Bank,
+  Bill,
+  Car,
+  Chess,
+  Dots,
+  Heart,
+  Home,
+  People,
+  Team,
+  Work
+} from '@linagora/twake-icons'
 import PropTypes from 'prop-types'
 import React, { Fragment, useState } from 'react'
 
 import Grid from 'cozy-ui/transpiled/react/Grid'
-import BankIcon from 'cozy-ui/transpiled/react/Icons/Bank'
-import BillIcon from 'cozy-ui/transpiled/react/Icons/Bill'
-import CarIcon from 'cozy-ui/transpiled/react/Icons/Car'
-import ChessIcon from 'cozy-ui/transpiled/react/Icons/Chess'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
-import HeartIcon from 'cozy-ui/transpiled/react/Icons/Heart'
-import HomeIcon from 'cozy-ui/transpiled/react/Icons/Home'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
-import WorkIcon from 'cozy-ui/transpiled/react/Icons/Work'
 import { useI18n } from 'twake-i18n'
 
 import { getThemesList } from './helpers'
@@ -19,16 +21,16 @@ import QualificationItem from '../QualificationItem'
 import withLocales from './locales/withLocales'
 
 const IconByName = {
-  people: PeopleIcon,
-  team: TeamIcon,
-  work: WorkIcon,
-  heart: HeartIcon,
-  home: HomeIcon,
-  car: CarIcon,
-  chess: ChessIcon,
-  bank: BankIcon,
-  bill: BillIcon,
-  dots: DotsIcon
+  people: People,
+  team: Team,
+  work: Work,
+  heart: Heart,
+  home: Home,
+  car: Car,
+  chess: Chess,
+  bank: Bank,
+  bill: Bill,
+  dots: Dots
 }
 
 const QualificationGrid = ({ noUndefined, noOthers, noHealth, onClick }) => {