Icon

Our icons are a mix of Material icons, and custom designed ones. This React allows for a single instance of an Icon to be added, by passing the icon name as a child.

Best practices

  • Use icons sparingly. They should be used to provide extra context to an existing text label.

Usage

See below for more detailed examples

import {Icon} from '@kalo/ui';

<Icon
  size={24}
  color="navy600"
>
  person_outline
</Icon>

IconSymbols

As mentioned above, our icons make use of SVG symbols (def and use). In order to get the icon symbols on to the page, a second component will need to be included somewhere in your application.

Note, that the IconSymbols component only needs to be included once on the page.

For example:

import {Icon, IconSymbols} from '@kalo/ui'

<Icon>more_vert</Icon>
<IconSymbols />

Props

NameTypeDescription
size
enumICON_SIZE
color
enumICON_COLOR
className
string
onClick
func
theme
object
title
string

Icons

Renders an icon from the Google Material Design icon set. See the Brand/Icons page for a full list of icons
<Icon color="blue400" size={24} > arrow_drop_down_circle </Icon>

Icon sizing

Icons can be a variety of sizing
<span> <Icon size={12}> attach_money </Icon> <Icon size={14}> attach_money </Icon> <Icon size={16}> attach_money </Icon> <Icon size={18}> attach_money </Icon> <Icon size={20}> attach_money </Icon> <Icon size={24}> attach_money </Icon> <Icon size={26}> attach_money </Icon> <Icon size={36}> attach_money </Icon> <Icon size={48}> attach_money </Icon> </span>

Icon colors

Any color from our palette can be passed in via the color prop
<span> <Icon color="pink300"> loop </Icon> <Icon color="pink400"> loop </Icon> <Icon color="pink500"> loop </Icon> <Icon color="pink600"> loop </Icon> <Icon color="pink700"> loop </Icon> <Icon color="blue300"> loop </Icon> <Icon color="blue400"> loop </Icon> <Icon color="blue500"> loop </Icon> <Icon color="blue600"> loop </Icon> <Icon color="blue700"> loop </Icon> </span>

Special icons

Some icons have special styles, for example being able to use a gradient fill
<Icon color="gradient-pink" size={48} > kalo_verified </Icon>