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 @camp/iconUpgrading to Next Gen
🚀 Bundle size decreased by 99%: The new individual Icon usage combined with tree shaking has decreased one of our largest bundles by a huge amount!
⛔️ No more <Icon> abstraction: . Use the icon directly in the correct name/size combination, e.g. <AcGlyphLarge />. See here for all icons with easy copy/paste ability.
🛠️ Changed props: The size prop has been removed and instead is included in the name of the icon. title is now required for accessibility purposes. description can be added for more details. If the icon is merely decorative, add the aria-hidden prop. All other SVG props are also acceptable.
Previous implementation
Previously, you could use the icon component in two ways:
import { Icon, AcGlyph } from '@activecampaign/camp-components-icon';
export default function () {
return (
<>
// Icon abstraction
<Icon use={'acGlyph'} size="medium" />
// Individual icon
<AcGlyph size="medium" />
</>
);
}New implementation
You can now only use the icon directly. The size prop is deprecated. This aids in tree shaking and keeping the bundle size small.
import { AcGlyphLarge } from '@camp/icon';
export default function () {
return <AcGlyphLarge title="accessible-title" />;
}Migration steps
- Update import path: Replace the old icon imports with specific icon/size combination from
@camp/icon. - Update import name: Find the right name/size combination for your icon, e.g.,
<AcGlyphLarge /> - Add/change props: Remove the size prop and add the title prop. If present, exchange the decorative prop for aria-hidden. Add the description prop if needed for more screen reader information.
Variations
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.
import { AddLarge } from '@camp/icon';
import { useTranslation } from '@activecampaign/core-translations-client';
import { SemanticColors } from '@camp/tokens';
export default function () {
const { t } = useTranslation();
return <AddLarge title={t('global:add')} fill={SemanticColors['icon-interactive']} />;
}Informational icons
Informational icons (icons that provide additional context but are not actionable themselves) should typically be icon-decorative. 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 using the color icon-interactive. 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 color icon-interactive.
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.
Accessibility
The new Camp icon is accessible by default. It requires that a title be populated. This will ensure the icon provides value to a screen reader in the most helpful pattern .
If you know that even more information would be helpful, you can also populate the description using the desc prop:
import { AddLarge } from '@camp/icon';
import { useTranslation } from '@activecampaign/core-translations-client';
export default function () {
const { t } = useTranslation();
return <AddLarge title={t('global:add')} desc="Add your campaign" />;
}Decorative icons
Decorative icons are purely visual. If the icon is missing it is not critical to the user experience.
Adding the aria-hidden property uses the aria-hidden="true" under the hood to hide the icon from assistive technologies.
import { AddLarge } from '@camp/icon';
import { useTranslation } from '@activecampaign/core-translations-client';
export default function () {
const { t } = useTranslation();
return <AddLarge title={t('global:add')} aria-hidden />;
}
