Icon

This component renders an icon. Either check the file library/atoms/Icon/iconNames.ts or look in the "Currently Used Icons" section below to view available icons.

It is also possible to add new icons if necessary, we use Streamline icons as the source for general icons. Check out the instructions to load new icons.

Use the Activity Type Icon component for something related to the activity type.

Animated Icon

We are using LottieFiles for animated icons. A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

The component AnimatedIcon has all the functionalities built-in. Choose the name of the icon you would like to render and try some of the attributes such as play, loop, etc, to achieve what you need.

Currently Used Icons

General Icons

Activity Type Icons

Animated Icons

Examples

<Grid gridGap={3}>
  <Icon name="surf" />
  <Icon name="cart" color="grey" size={50} />
  <div style={{background: 'black', padding: '10px', display: 'flex'}}>
  <Icon name="lock" size={100} color="white" />
  </div>
</Grid>

<Grid gridGap={6} gridRowGap={4} gridTemplateColumns='repeat(4, 1fr)'>
  <div>
    <H4 mb={4}>Play on click and freeze on last frame</H4>
    <AnimatedIcon name="menu" playOnClick freezeOnLastFrame />
  </div>
  <div>
    <H4 mb={4}>Play on click and freeze on last frame and reverse animation on even click</H4>
    <AnimatedIcon name="menu" playOnClick freezeOnLastFrame reverseOnEvenClick />
  </div>
  <div>
    <H4 mb={4}>Play on click with loop</H4>
    <AnimatedIcon name="menu" loop playOnClick />
  </div>
  <div>
    <H4 mb={4}>Autoplay with loop</H4>
    <AnimatedIcon name="menu" autoplay loop size={50} />
  </div>
</Grid>