Icons

Choose an icon when you need to communicate a specific message quickly and effectively, such as in navigation or action button.

Prerequisites

• react
• react-dom

Installation

pnpm add @krakentech/icons

Configuration

The icons package comes with its own provider allowing you to pass defaults for icons.

Note this is optional, and serves to allow you to port any overrides previously passed in overrides.icon via CoralThemeProvider.

import { IconsThemeProvider } from '@krakentech/icons';

<IconsThemeProvider>
    ...
</IconsThemeProvider>

Default props

The defaultProps object allows you to set the default prop values for the icons in your project.

Below is an example of overriding the default color for all icons.

<IconsThemeProvider
    defaultProps={{
        color: 'red',
    }}
>
    ...
</IconsThemeProvider>

Usage

import { AccountIcon, ... } from '@krakentech/icons';
 
<IconCircleUser />
<IconAdd />
<IconApple />
<IconArrowDown />
<IconArrowLeft />

All

Below are all of the currently available icons as they come by default. Some icons are by default duotone, and others are by default flat colour. Note all icons, regardless of their default state, support both flat and duotone colour declarations. You can click on an icon to copy the code snippet to your clipboard.

Properties

duotoneColor

All icons support duotone colourways, and have 3 different options for that duotone color.

<IconEmail color="duotone" />
<IconCircleUser color="duotone" />
<IconCalendar color="duotone" />
<IconHome color="duotone" />
<IconQuote color="duotone" />
...
<IconEmail color="duotone" duotoneColor="secondary" />
<IconCircleUser color="duotone" duotoneColor="secondary" />
<IconCalendar color="duotone" duotoneColor="secondary" />
<IconHome color="duotone" duotoneColor="secondary" />
<IconQuote color="duotone" duotoneColor="secondary" />
...
<IconEmail color="duotone" duotoneColor="tertiary" />
<IconCircleUser color="duotone" duotoneColor="tertiary" />
<IconCalendar color="duotone" duotoneColor="tertiary" />
<IconHome color="duotone" duotoneColor="tertiary" />
<IconQuote color="duotone" duotoneColor="tertiary" />

primary

secondary

tertiary

color

We can use straight hexadecimal colours, or colour name from the theme used in the provider.

<IconCircleUser color="#00FF00" />
<IconAdd color="#00FF00" />
<IconApple color="#00FF00" />
<IconArrowDown color="#00FF00" />
<IconArrowLeft color="#00FF00" />

size

<IconCircleUser size={20} />
<IconAdd size={40} />
<IconApple size={60} />
<IconArrowDown size={80} />
<IconArrowLeft size={100} />

Full API

Design

What are icons for?

Icons are simple, stylised, and represent objects and/or actions. They are used to reduce clutter and helping users to navigate through the interface more efficiently.

What are illustrations for?

Illustrations are more complex and detailed, these are used to convey more complex ideas and communicate our brand’s personality.

What is the difference between an icon and an illustration?

Icons are simple, stylised, aiding navigation. Illustrations are detailed and bring personality to a page.