Live Demo
<ba-icon name="paper-plane"></ba-icon>Guidelines
Shapes and symbols can mean different things to different people. Commonly recognisable icons are rare and the same icon can have a different meaning depending on the app or website used. Adding text next to the icons can remove the ambiguity and clarify the meaning
Further Reading:
Accessibility
ba-icon does not support colour selection. Allowing free colour choice makes it difficult to guarantee sufficient contrast, meet accessibility requirements, and maintain consistency across products. When colours are chosen for aesthetic rather than functional reasons, icons can lose clarity, become hard to perceive across themes, or fail accessibility standards.
Instead, icon colour is determined by the component and the visual context in which the icon appears. Components such as ba-message set icon colour based on state, while containers like ba-page-segment and ba-card apply themes that change background colour and automatically ensure appropriate icon contrast. Icons inherit these decisions rather than defining their own colour
In most scenarios it's preferable to have visible text next to the icon. Alternative text can be used as a last resort when there isn't space for visible text next to the icon.
Further reading:
In high contrast mode the icons colour reverts to a combination of current text and canvas colours
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
alt |
alt |
Defines the visually hidden text and the svg title | string | undefined |
undefined |
name(required) |
name |
Name of the icon to be shown | string |
undefined |
size |
size |
Size of the icon | "16" | "24" | "32" | "48" | "64" | undefined |
'32' |
A page with all the icons can be found here Iconography.
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | None |
Permitted ARIA roles
None
Parent components
ba-icon can be slotted into:
Usage
Basic usage
Most scenarios will only require the name and a size
<ba-icon name="add" size="24"></ba-icon>
Adding alternative text
If there isn't space to put the text next to the icon - the alt attribute can set some visually hidden text for assistive technology to read to the user
<button>
<ba-icon name="close" alt="Close modal"></ba-icon>
</button>