Add how to use icons

[olimj]

As a user of the Design System I want to know how and if I should use icons So that there is consistency across products

What are the circumstances where icons are relevant or useful to a user? Do they add more than just a brand aesthetic? If we do use icons, how can we ensure consistency and accessibility?

[olimj]

Relates to: https://github.com/barnardos/design-system/issues/226 and https://github.com/barnardos/design-system/pull/258

[olimj]

Icons Need a Text Label To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context.

https://www.nngroup.com/articles/icon-usability/

[olimj]

On SVG use:

Although using SVG may add considerable page weight (depending on how much they’re used) and may require a polyfill, it would certainly be a better experience for users with custom style sheets and users of Opera Mini in extreme mode.

https://www.24a11y.com/2017/svg-icon-fonts-accessibility-case-study/

[olimj]

We're going to be testing icons on service page templates:

If deemed useful in testing by users, do we use an icon font or do we use SVGs? Is there a minimum / maximum size we should use?

[olimj]

If deemed useful in testing by users, do we use an icon font or do we use SVGs? Is there a minimum / maximum size we should use?

Great work Oli

[mat-walker]

If you gather together a set of icons I'll pull it into the testing in a few weeks. Doesn't have to be a complete set at this point just the most likely and we can add to them over time.

[derekjohnson]

SVG icons are a superior option. https://css-tricks.com/icon-fonts-vs-svg/ has a good comparison, and the last point can be handled with something like Grunticon.

Other useful links:

• https://speakerdeck.com/ninjanails/death-to-icon-fonts
• https://css-tricks.com/pretty-good-svg-icon-system/
• https://www.sitepoint.com/icon-fonts-vs-svg-debate/