Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Paragon does not have a custom set of icons. Instead, we gather the best free and open source icons that suit our purposes and form a cohesive visual look and feel. Today, we primarily use the sharp style of Google Material system icons and are leaving Font Awesome icons behind.

To add an icon…

...

First search Google Material icons for an appropriate icon to add.

...

Name it (the name does not need to match Google’s) and add it to the Paragon Figma. See this frame for detailed design instructions.

...

  1. Verify that the icon exists in code.

  2. Find the perfect icon in Google Material Figma

  3. Copy the icon from Google Material Figma

  4. Paste the icon in Paragon __Icons__ page. Note: Double check that the icon is 24px by 24px.

  5. Publish Paragon Figma library

...

Icons in Paragon

...

What do we mean by “Icon”?

Icon

A low detail visual element designed to communicate a simple concept in a utilitarian fashion at small sizes.

Graphic or Illustration

A higher detail visual element, that communicates simple or complex concepts in an expressive way.

Image ModifiedImage Modified