Icon
Icons are simple, visual elements that a user understands right away. They typically indicate action and help with cognitive recognition.
Loading...
Overview
Resources
Install
yarn add @activecampaign/camp-components-iconVariations
Our Design Systems and Brand Design teams create each icon from scratch in order to build an icon library that is uniquely “ActiveCampaign.” Icons have specific uses and styling at various sizes.
Sizes
There are four available icon sizes in Camp.
- xSmall (8px)
- Small (12px)
- Medium (16px)
- Large (24px)
xSmall icon
Use xSmall icons sparingly. They have very little detail and are meant to indicate basic actions, like a chevronDown in a dropdown.
Small icon
Use small icons as visual indicators for limited space. They are often used within inputs as their own clickable element. They are also used throughout the platform in modal headers and sidebars to indicate close.
Medium icon
Use medium icons to indicate individual actions. Medium icons are often used as their own button. In the above account title, the medium pencilEdit icon can be clicked to edit the title field.
Large icon
Use large icons when you have a lot of space. Large icons are also commonly used in xLarge avatars and can also be used as triggers that open a popover.
Colors
Set the fill to a Camp color token.
Informational icons
Informational icons (icons that provide additional context but are not actionable themselves) should typically be slate400. The designer can select a different 500-level color from our palette if needed on an individual basis. Informational icons should be aligned to the left of the text.
Actionable icons
Actionable icons that are accompanied by text (ie. a text link that includes an icon) should be the color of the text, most often ocean500. Note that links do not always need to be ocean500. See text link color options here. Icons that are a part of a text link should be aligned to the right of the text.
Actionable icons that are not accompanied by text should typically be the default icon color of slate600 (see chevrons in the accordion component, the close icon in the modal component, personalization, and calendar date picker icons in inputs etc.
Close and delete
Close indicates remove. Use the Close icon to remove an item or close out of something. DeleteTrash indicates deletion. Use the DeleteTrash icon when the user is deleting something entirely. This is usually a permanent action.
Implementation details
The Icon module makes every icon available as its own React component in order to reduce the dependency size.
Named exports
All icons are made available as named exports so you can simply import the exact icon you need in your application.
import { DeleteTrash } from '@activecampaign/camp-components-icon';
function YourComponent(props) {
return<DeleteTrash size="medium" />
)
};Manual use of icon component
The simplest use of icons is to directly import an icon as illustrated above. For more complex usage you can also manually get the icon you need from the @activecampaign/camp-tokens-iconpackage and pass that into the <Icon /> component (see example below). This method allows for the smallest bundle size and maximum flexibility but requires an additional dependency.
import { useState } from 'react';
import { Icon } from '@activecampaign/camp-components-icon';
import { check, errorCircle } from '@activecampaign/camp-tokens-icon';
function FlexibleComponent(props) {
const [hasError, setHasError] = useState(false);
return (
<Icon
use={hasError ? errorCircle : check}
fill={hasError ? 'strawberry500' : 'mint500'}
size="small"
{...props}
/>
);
}Migrating from v2 to v3
If you don’t have any conditional logic within the v2 Icon component migration is made easy. Instead of importing Icon as a default export import the name of the component from the same package.
Make sure the icon you’re using PascalCase when importing a specific icon component. Now that you’ve imported the specific icon component you want you can replace Icon with UserContact and remove the use prop.
- import Icon from '@activecampaign/camp-components-icon'
+ import { UserContact } from '@activecampaign/camp-components-icon'
function ExampleComponent(props) {
- return <Icon use="userContact" size="medium" fill="slate400" />
+ return <UserContact size="medium" fill="slate400" />
}If your usage of the v2 Icon entails more conditional logic you can continue using the <Icon /> component with some extra support from another package.
<Icon /> is now a named export instead of a default export. The use prop is only available on the <Icon /> component. It is not accessible from the individually exported icons. The use prop no longer accepts type string. It expects type Object specifically from the @activecampaign/camp-tokens-icon package.
- import Icon from '@activecampaign/camp-components-icon';
+ import { Icon } from '@activecampaign/camp-components-icon';
+ import { check, errorCircle } from '@activecampaign/camp-tokens-icon';
function FlexibleComponent(props) {
const [ hasError, setHasError ] = React.useState(false)
return (
<Icon
- use={ hasError ? "errorCircle" : "check"}
+ use={ hasError ? errorCircle : check}
fill={ hasError? 'strawberry500' : 'mint500' }
size="small"
{...props}
/>
)
};Accessibility
Standalone icons
Standalone icons convey the meaning all on their own and have no support with surrounding labels. Update the title and description so that it accurately explains the image.
title: a short title that becomes the tooltip as well as what is read to assistive technology.desc: a longer description if needed
import { HeartOutline } from '@activecampaign/camp-components-icon';
function FavoriteImage() {
return (
<HeartOutline
size="small"
title="favorite image"
desc="heart symbol indicating a favorite image"
/>
);
}The id’s used in the aria-labelledby, title, and desc attribute will be automated for you as long as you use the title or desc prop.
The above will render the following:
<!-- role="img" so that the SVG is not traversed by browsers that map the SVG to the "group" role -->
<!-- aria-labelledby pointing to ID's of title and desc because some browsers incorrectly don't use them unless we do -->
<svg role="img" viewBox="0 0 8 8" aria-labelledby="unique-title-id unique-desc-id">
<!-- title becomes the tooltip as well as what is read to assistive technology -->
<title id="unique-title-id">Short Title (e.g. Add to Cart)</title>
<!-- longer description if needed -->
<desc id="unique-desc-id">A friendly looking cartoon cart icon with blinking eyes.</desc>
<!-- all the SVG drawing stuff -->
<path d="..." />
</svg>Decorative icons
Decorative icons are purely visual. If the icon is missing it is not critical to the user experience.
Adding the decorative property uses the aria-hidden="true" under the hood to hide the icon from assistive technologies.
import { AddCirle } from '@activecampaign/camp-components-icon';
import { Button } from '@activecampaign/camp-components-button';
function AddToCard() {
return (
<Button>
Add to Cart
<AddCircle decorative={true} .... />
</Button>
)
}The above will render the following:
<button>
<svg aria-hidden="true" viewBox="0 0 8 8">
<path d="..." />
</svg>
Add to Cart
</button>
