Symbols used to enhance communication
||See icon names below||Sets the icon's symbol|
Pair with some text
Icons should be used to enhance content not replace it. Users can misinterpret icons, so strive to accompany an icon with a label or other relevant content in close proximity.
If an icon is on its own, use the
title attribute to explain what it symbolizes (e.g. "Your current location") or its action (e.g. "Reload this page", like your browser's refresh icon). Hover over the user icon for a clue:
Why not SVG?
Because icons should be paired with some text (see above) they should reference that text with
aria-labelledby attribute. In cases where there is no label, use