Canopy Flag Icon — Best Practices
SkillDev toolsBest practices for the Canopy Flag Icon component. Trigger whenever lg-flag-icon, LgFlagIconComponent, or flag icon imports appear in an Angular project using Canopy.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Canopy Flag Icon — Best Practices skill
What this skill tells your AI
The instructions your AI receives, as published by legal-and-general/canopy in skills/best-practice/flag-icon/SKILL.md and read by ahel’s review.
This skill provides usage guidance, dos and don'ts, and input reference for the Canopy lg-flag-icon component from @legal-and-general/canopy.
Apply this skill whenever you use lg-flag-icon or import LgFlagIconComponent in an Angular project.
Import
import { LgFlagIconComponent } from '@legal-and-general/canopy';
Add to your standalone component's imports array or Angular module.
Basic Usage
<lg-flag-icon name="gb"></lg-flag-icon>
Inputs
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
name | The name of the flag icon | string | undefined | Yes |
Dos and Don'ts
Do
- Do use the
globalflag for regions where a single country flag is ambiguous, e.g. "Middle East". - Do always pair the flag icon with the country or region name as visible text.
- Do ensure sufficient contrast between the flag and its surrounding background.
Don't
- Don't use flag icons as a replacement for language labels where ambiguity is possible — a flag represents a country, not necessarily a language.
Related
- Use
lg-iconfor UI icons — see the UI icon skill. - Use
lg-pictogramfor illustrative pictograms.
Signals
- GitHub stars
- 23
- Forks
- 46
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
canopy-flag-icon- Source
- github.com/legal-and-general/canopy