Icons

There are two robust icon libraries we recommend for immediate use as symbols within your web project:

  • Font Awesome
  • Google Material

Please use one of these readily available libraries in your project instead of custom icons. If neither library fits the identity of your project, you can source another library or create custom icons. However using a readily available icon library will help ensure consistency in your project and create efficiencies in both design and development phases.

Font Awesome Icons

Included in your Master Web Project Sketch Template folder is library for a commonly used icon toolkit called Font Awesome. Munroe has created a library of these icons for your convenience so that they can be imported into your sketch doc and fast track your project.

The Font Awesome library includes a variety of icon styles to help match your project:

  • Brands
  • Duotone
  • Light
  • Regular
  • Solid/Round
  • Solid/Sharp
  • Thin

Check out the available icons from Font Awesome.

Adding Font Awesome icons to your project

Once the Font Awesome library is imported, you can add an icon to your project by clicking Insert from the top left of your application bar. From the expanded dropdown menu, select the icon you are looking for under Symbols.

Customizing your icons

Once your Font Awesome icon is inserted onto your artboard, you can update the color(s) from the Symbol palette under Overrides.

Google Material Icons

Google Material is another good online resource to use web friendly icons if Font Awesome doesn’t have what you need. Material Icons are available in five styles and a range of downloadable sizes and densities. The icons are based on the core Material Design principles and metrics.

Adding Google Material icons to your project:

  • Head to: https://fonts.google.com/icons?icon.set=Material+Icons
  • Search for the icon you need.
  • Click on the icon and download the svg file,
  • Save to your project folder, add “Google Material” to the name of the file (i.e., GoogleMaterial_settings_black_24dp.svg)
  • In your sketch doc, click Insert > Image, locate your file and hit Enter.
  • Edit as your would any other vector file in sketch.
  • Stay tuned for a sketch library for Google Material!