Icon

Icon components.

Default

By default, the component take color and size of its container.

<IconName />

Name of icon are defined by UI/UX in styleguide : https://app.zeplin.io/styleguide/

Exemples

By default, the component take color and size of its container.

<div style={{display :'flex'}} >
  <div style={{ height: '25px', width: '80px', border: '2px solid black' }}>
    <CheckboxIcon />
  </div>
  <div style={{ height: '80px', width: '25px', border: '2px solid black' }}>
    <CheckboxIcon />
  </div>
  <div style={{ height: '25px', width: '25px', border: '2px solid black' }}>
    <CheckboxIcon />
  </div>
</div>

You can define color and background color of Icon by container :

<div style={{display :'flex'}} >
  <div style={{color : 'violet', height: '50px', width: '50px', border: '2px solid black' }}>
    <CheckboxIcon />
  </div>
  <div style={{color : 'blue', height: '50px', width: '50px', border: '2px solid black', background : 'grey' }}>
    <CheckboxIcon />
  </div>
  <div style={{color : 'red', height: '50px', width: '50px', border: '2px solid black', background : 'blue' }}>
    <CheckboxIcon />
  </div>
</div>

It's possible to set directly the size and color.

<div style={{ height: '50px', width: '50px', border: '2px solid black' }}>
  <CheckboxIcon size={30} color='red'/>
</div>
<div style={{ background:'grey', height: '50px', width: '50px', border: '2px solid black' }}>
  <CheckboxIcon size={20} color='violet'/>
</div>
<div style={{ height: '50px', width: '50px', border: '2px solid black' }}>
  <CommentIcon size='m' color='#007804'/>
</div>
<div style={{  height: '50px', width: '50px', border: '2px solid black' }}>
  <CalendarIcon size='s' color='#007804'/>
</div>

Available Icons

Props

Name	Type	Required	Default	Description
size	string/number	No	100% container	Icon size : size='s',size='m',size=30
color	string	No	container or black if not	Icon color