lab49 / tech-talk-creating-icons-for-digital-platforms

Lab49 TechTalk: Creating icons for digital platforms

Lab49 TechTalk: Creating icons for digital platforms

This is a companion repository to the Lab49 tech talk of the same name.

There is a video recording of the talk on YouTube. Further discussion can be found at LinkedIn.

Figma presentation: https://www.figma.com/file/VwGpRo1jt8lbz9JNaoKh4X/Icon-Presentation

---

In this two-part tech talk, James Cutts and Brian Wm. McAllister walk through the process of creating icons correctly in design software, all the way through to incoprorating those icons in your application.

James shows how to ensure that the icons you create are crisp and perfect when originally drawn. James also shows how to translate icons drawn at one size to another size the correct way, so that your gorgeous icons stays crisp and perfect at all sizes.

James also created a custom icons template you can use to set up your icon drawings. It's important that icons as part of a set follow a similar set of sizing and spacing guidelines, and this template is the perfect way to get started.

In the second part, Brian leads a discussion of how to take icons created in design software and use them in your appliction. This GitHub repository includes a Storybook that demonstrates all of the concepts that James describes, plus how to use SVG icons as sprites, external references, inline, and demonstrates the pros and cons of all the options.

Further resources:

• Icon Usability by Nielson Norman Group: https://www.nngroup.com/articles/icon-usability
• Material Design Grid and keyline shapes: https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes
• A complete guide to iconography: https://www.designsystems.com/iconography-guide/
• 6 Easy Steps To Better Icon Design: https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
• Font Awesome: https://fontawesome.com/
• Bootstrap Icons: https://icons.getbootstrap.com/
• SVGR: https://github.com/gregberge/svgr
• SVGO: https://github.com/svg/svgo
• SVGOMG: https://jakearchibald.github.io/svgomg/
• The UX of Lego interface panels: https://www.designedbycave.co.uk/2020/LEGO-Interface-UX/

Getting started

1. Clone this repository
2. npm install
3. npm start

The start script will start up Storybook locally.

Development

Scripts

Name	Purpose
start	Start up Storybook
storybook	Also starts up Storybook