Icons
Icons are a core part of our visual language, helping users recognise actions and understand content at a glance. They support usability by reinforcing meaning, improve clarity, and enhance the overall user experience.
Icon library
FontAwesome icons
Helix uses FontAwesome as the default icon library. However, not every icon available from FontAwesome is stored in the design system and new ones are added to our collection of icons as we need them.
See icon collection for current range of icons available in Helix.
Custom icons
These icons are custom designed by the design team in the scenario where no appropriate icon could be sourced from FontAwesome. They are designed with the intent of emulating the style of FontAwesome to maintain a seamless user experience.
Usage guidelines
Certain icons have an associated action to them and it’s best to maintain those patterns for user familiarity across HUB24 Group applications. Don’t add new icons to the design system if a suitable one already exists to represent the same meaning.
| Example | Icon name | Action or meaning |
|---|---|---|
trash-can |
delete | |
pen |
edit | |
circle-question |
help | |
message-lines |
feedback | |
angle-down |
expand | |
chevron-up |
collapse | |
arrow-left |
go back | |
triangle-exclamation |
warning | |
ellipsis-vertical |
more options | |
presentation-screen |
presentation view | |
arrow-down-to-bracket |
download | |
arrow-up-right-and-arrow-down-left-from-center |
full screen view | |
sidenav |
side navigation | |
copy |
duplicate/copy | |
list-ul |
list view | |
sliders-up |
page settings | |
eye-slash |
hide | |
link |
external link | |
arrow-up-right-from-square |
open third party in new tab | |
bars |
mobile menu | |
gear |
settings | |
circle-info |
more information | |
magnifying-glass |
search |
Developers
See icon component for more information.