Icon
<sl-icon> | SlIcon
Icons are symbols that can be used to represent various options within an application.
FontAwesome icons usage
You can find FontAwesome icons here
If no name prefix is applied to the name attribute, the regular icon variant is used.
Regular icons can also be used via the ‘far-’ prefix.
To use a ‘solid’ icon, prefix the name with fas-.
To use a brand icon, prefix the name with fab-.
To use a light icon, prefix the name with fal-.
<p><sl-icon title='gear' name="gear"></sl-icon> gear</p> <p><sl-icon title='far-gear' name="far-gear"></sl-icon> far-gear</p> <p><sl-icon title='fal-gear' name="fal-gear"></sl-icon> fal-gear</p> <p><sl-icon title='fas-circle-check' name="fas-circle-check"></sl-icon> fas-circle-check</p> <p><sl-icon title='fab-github' name="fab-github"></sl-icon> fab-github</p>
Custom icons usage
To display custom HUB24 icons designed by the team, set the library and
name attributes of an <sl-icon> element. The
hub24 library resolves the icon name to the matching SVG in
dist/icons/hub24/.
See collection for the current range of custom icons available in Helix.
Using an icon from the HUB24 library
Use the registered library for icons bundled with Helix. Add label when an icon conveys
meaning without accompanying text.
<sl-icon library="hub24" name="sidenav" label="Side navigation" style="font-size: 2rem;" ></sl-icon>
Loading a hosted SVG
Use src when the consuming application hosts the SVG or loads it from a CORS-enabled
endpoint.
<sl-icon src="https://hds.hub24.com.au/dist/icons/hub24/grid.svg" label="Grid" style="font-size: 2rem;" ></sl-icon>
Examples
Colors
Icons inherit their color from the current text color. Thus, you can set the
color property on the <sl-icon> element or an ancestor to change the
color.
<div style="color: #4a90e2;"> <sl-icon name="triangle"></sl-icon> <sl-icon name="bell"></sl-icon> </div> <div style="color: #9013fe;"> <sl-icon name="clock"></sl-icon> <sl-icon name="cloud"></sl-icon> </div> <div style="color: #417505;"> <sl-icon name="flag"></sl-icon> <sl-icon name="heart"></sl-icon> </div> <div style="color: #f5a623;"> <sl-icon name="star"></sl-icon> <sl-icon name="trash"></sl-icon> </div>
Sizing
Icons are sized relative to the current font size. To change their size, set the
font-size property on the icon itself or on a parent element as shown below.
<div style="font-size: 32px;"> <sl-icon name="bell"></sl-icon> <sl-icon name="clock"></sl-icon> <sl-icon name="cloud"></sl-icon> <sl-icon name="download"></sl-icon> </div>
Labels
For non-decorative icons, use the label attribute to announce it to assistive devices.
<sl-icon name="star" label="Add to favorites"></sl-icon>
Icon collection
Helix includes a collection of Font Awesome and custom HUB24 icons. Refer to the usage guidance above for more details.
Font Awesome
Helix includes regular, solid and light FontAwesome icons. Regular icons are used by default.
Showing 552 of 552 icons
No icons match your search.
Custom icons
The following custom HUB24 icons are available.
New icon requests
Can’t find the icon you’re looking for? It is likely not added to Helix yet.
- Notify the designer in your scrum team or make a post in the design system working group teams channel so that the design system team can get it sorted.
- Designers should refer to the FontAwesome website for the full range of icons on offer and note down the icon names that are required for new icon requests.
Note: Scrum team designers should make effort to ensure that new icons have been added to the design system before development for a project has started.
If you want to add new icons yourself, refer below and you’ll also need to be a contributor for Helix. See Contributing.
To keep the size of deployments to a minimum, we only include the icons that are needed. To add an
icon that is not already included, copy the SVG file from the ZIP file in the root folder of this
repository into the corresponding
src/icons/fontawesome/svgs/{solid/light/regular/brands} folder.
Icons from the solid, regular, light and brands categories are available for inclusion. To add other
variants, it will be necessary to modify src/register-font-awesome.js and define a new
prefix for that variant.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
name
|
The name of the icon to draw. Available names depend on the icon library being used. |
|
string | undefined
|
- |
src
|
An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks. |
string | undefined
|
- | |
label
|
An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. |
string
|
''
|
|
library
|
The name of a registered custom icon library. |
|
string
|
'default'
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-load |
|
Emitted when the icon has loaded. When using spriteSheet: true this will not emit.
|
- |
sl-error |
|
Emitted when the icon fails to load due to an error. When using
spriteSheet: true this will not emit.
|
- |
Learn more about events.
Parts
| Name | Description |
|---|---|
svg |
The internal SVG element. |
use |
The |
Learn more about customizing CSS parts.