Icon

Icon Component

import { Icon } from "reckon-mobile-design-system";
<Icon icon="beach" />;

background

string

icon

enum

required

size

"xxsmall" │ "xsmall" │ "small" │ "medium" │ "large" │ number

"large"

color

string

colors.idle.dark

style

object

type

"default" │ "circle" │ "square"

"default"

Sizes

Icon includes a set of predetermined size tokens that you can use for consistancy.

Token	Size
`xxsmall`	8
`xsmall`	12
`small`	16
`medium`	24
`large`	32

<Icon icon="cogFilled" size="xxsmall" />
<Icon icon="cogFilled" size="xsmall" />
<Icon icon="cogFilled" size="small" />
<Icon icon="cogFilled" size="medium" />
<Icon icon="cogFilled" size="large" />

<Icon icon="cogFilled" size="xxsmall" />
<Icon icon="cogFilled" size="xsmall" />
<Icon icon="cogFilled" size="small" />
<Icon icon="cogFilled" size="medium" />
<Icon icon="cogFilled" size="large" />

Icon Types

We have three different types of framing for icons; default, square and circle.

<Icon icon="reportOutline" color={colors.action.dark} size="large" />
<Icon
  icon="reportOutline"
  color={colors.actionSecondary.dark}
  background={colors.actionSecondary.light}
  type="circle"
  size="large"
/>
<Icon
  icon="reportOutline"
  color={colors.highlighted.light}
  background={colors.highlighted.dark}
  type="square"
  size="large"
/>

<Icon icon="reportOutline" color={colors.action.dark} size="large" />
<Icon
  icon="reportOutline"
  color={colors.actionSecondary.dark}
  background={colors.actionSecondary.light}
  type="circle"
  size="large"
/>
<Icon
  icon="reportOutline"
  color={colors.highlighted.light}
  background={colors.highlighted.dark}
  type="square"
  size="large"
/>

All Icons

add

alert

allowance

archived

arrowLeft

arrowUp

arrowDown

arrowRight

arrowLeftFilled

arrowRightFilled

beach

briefcaseFilled

briefcaseOutline

building

bookOpen

calendar

car

checkCircle

cogFilled

cogOutline

cancel

chat

chevronUp

chevronLeft

chevronRight

chevronDown

chevron

clock

cog

community

cross

disconnected

dollar

dots

duplicate

edit

energyFilled

energyOutline

event

expand

faceID

faceRecognition

fbt

fingerprint

helpFilled

laundry

meal

message

messageSquare

moneyFilled

moneyOutline

moon

newBadge

number1point5x

number2x

open

ordinaryHours

pencil

peopleFilled

peopleOutline

person

phone

plane

plus

plusEnclosed

remove

reportFilled

reportOutline

salarySacrifice

save

social

superGuarantee

support

tick

tickEnclosed

touchID

transport

users

Adding new icons

Have your icon design ready in Figma.
Use the 'union selection' boolean operation, to create a single path/shape.
Create a 32x32 frame, and place the icon in the middle (horizontally and vertically). Resize it so it touches the edges of the frame without overlap.
Copy the 'frame' as an SVG within figma
Paste the SVG code in a blank text file.

<svg
    width="32"
    height="32"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="32" height="32" fill="white" />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M18.6429 2H29.6905C30.2399 2 30.7667 2.21071 ...."
      fill="#433D9D"
    />
  </svg>

remove everything but the contents of the 'd' attribute of the SVG path..

"M18.6429 2H29.6905C30.2399 2 30.7667 2.21071 ...."

Copy the SVG path string into the icons.js file. Remember to place it alphabetically in the list.

{
  "add": "M18.6429 2H29.6905C30.2399 2 30.7667 2.21071 ...",
  "beach": "M18.6429 2H29.6905C30.2399 2 30.7667 2.21071 ...",
  "calendar": "M18.6429 2H29.6905C30.2399 2 30.7667 2.21071 ..."
}