Skip to content

Instantly share code, notes, and snippets.

@natecavanaugh

natecavanaugh/Lexicon Icon Design Guidelines.md

Last active November 6, 2019 19:09
Show Gist options
  • Save natecavanaugh/b9546c4215e5d5ef88a1b9d6ae2041a3 to your computer and use it in GitHub Desktop.
Save natecavanaugh/b9546c4215e5d5ef88a1b9d6ae2041a3 to your computer and use it in GitHub Desktop.
Download ZIP
The Lexicon icon design process and guidelines for designers and developers
Raw
Lexicon Icon Design Guidelines.md

Lexicon Icon Design Guidelines

Note: These guidelines do not apply to the Language Flag Icons, which should have their own guidelines

Reasoning

The rules below are mainly there for a few reasons:

  1. To make it easier to communicate to developers what an icon's purpose and naming should be
  2. To make it easier for Liferay's theme developers to be able to customize the look and feel of the icon set from a theme
  3. To make sure that the icons delivered are as fast to load and cruft-free as possible
  4. For general consistency sake with existing icons

For Designers

  • Icons should be designed at 512x512 size.
    • Use a ratio of 1:32, so if you want to get 1px in a 16px icon you must use 32px of space.
  • Do not use decimals for pixels, only full numbers. To achieve this in Illustrator, turn on the "Snap to Pixel" option in the View menu.
  • Outline icons have 2px of border.
  • Try to use 2px of border radius for corners, though in some cases you can use 1px or avoid it altogether.
  • Layers should not be arbitrarily grouped.
  • But unless it's absolutely necessary, icons should not be only a single compound path.
  • Icons should only use one color, which is pure black for all elements
  • Validate the consistency and clarity of the icon
    • Make sure that the icon looks visually and stylistically consistent with the rest of the icons.
    • Make sure that the icon makes sense within the context of it's intended purpose (it should be as clear as possible what thing it's describing)
  • If creating more than one icon in a file, layers should be named, as best as possible, to what the icon name will be.
  • The icon name should be all lowercased, and words separated by dashes.
  • The names should attempt to be representative of not mainly how they look, but what their general purpose could be.
    • This isn't a hard and fast rule, but calling an icon that looks like a plus sign would probably be more commonly used to add something, so you would want to make sure that if it is supposed to be a plus, that you make it unique to that action.
  • Make sure you keep the number of anchor points to only those needed. The image below is an example of what you should not do.
    • These extra anchors are usually the result of Pathfinder operations in Illustrator. Delete any extraneous anchor points.
      Anchors Bad
      Anchors Good

For Developers

  • Elements inside of the icon should have a class attribute of either lexicon-icon-body or lexicon-icon-outline.
    • lexicon-icon-body is used primarily for elements that make up the core or the main part of an icon.
      You generally want to use lexicon-icon-body if there are lines inside of your icon that surround or enclose an area or space.
    • lexicon-icon-outline us used primarily for elements that make up the lines of the icon, even if it visually looks like a blank area.
      Icons that only have a single element should generally get the lexicon-icon-outline class.
  • Icons should not have any style elements embedded or use any CSS for presentation (in fact, at the very most, only fill="none" is acceptable as a presentational attribute).

Examples

Cog

Desktop

Align Center

Exclamation Circle

Exclamation Full

Camera

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment