Skip to content

Lab49 TechTalk: Creating icons for digital platforms

Notifications You must be signed in to change notification settings

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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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