| name | canopy-icon |
| description | Best practices for the Canopy UI Icon component. Trigger when using lg-icon, LgIconComponent, or adding functional UI icons in an Angular project using Canopy. |
| license | MIT |
| metadata | {"source":"https://github.com/Legal-and-General/canopy/tree/master/projects/canopy/src/lib/icon/docs/guide.mdx"} |
Canopy UI Icon — Best Practices
This skill provides usage guidance and input reference for the Canopy lg-icon component from @legal-and-general/canopy.
Apply this skill whenever you use lg-icon or LgIconComponent.
See also: the pictogram skill for brand/illustrative icons.
Import
import { LgIconComponent } from '@legal-and-general/canopy';
Basic Usage
<lg-icon name="email"></lg-icon>
Inputs
| Input | Type | Default | Required | Description |
|---|
name | string | undefined | Yes | The name of the icon. |
Sizing
Icons size to 1em (height and width), inheriting the font-size of their parent. Scale icons on the 4px scale.
Colour
By default, icons use currentColor for their fill, so they inherit the text colour of their parent element.
<span style="color: var(--colour-green-700)">
<lg-icon name="email"></lg-icon>
</span>
Note: The help and query-outline icons cannot change colour.
Decorative vs. Informative Icons
Dos and Don'ts
Do
- Do scale icons on the 4px scale for crisp outlines.
- Do use charcoal or high-contrast colour icons on white backgrounds.
- Do use tinted colours on light backgrounds — minimum contrast ratio 4.5:1.
- Do use white icons on high-contrast backgrounds.
- Do add
aria-hidden="true" to decorative icons.
Don't
- Don't scale icons below 16px.
- Don't scale icons above 64px — use pictograms or illustration for more prominent graphics.
- Don't overlay icons on photographic backgrounds.
- Don't use low-contrast colour combinations.
