Iconography

Icons are a visual representation of an idea and/or action.

Usage

An icon by itself doesn't have a meaning, therefore it must be always associated to a label, an action, or something similar. The icon itself helps to communicate an idea but the meaning must be given by the label. The icon is just a visual aid. Please choose carefully the icon and the associated label so together they have a powerful and not misleading meaning.

Using an icon to communicate a concept is not always easy. If you are in this situation consider just using text.

Size usage for designers

Use a 16px box for icons of 16px.

Icon 16px box 16px

Size usage for developers

  • Commure icons have no size.
  • The size of the icon is established by its container.
  • The default container size is 16px.
  • The available icons to use are in the Commure Icon Library. Don't mix these icons with icons from outside this library. If Commure doesn't provide the icons you need, switch icon libraries completely.

Commure icon library

Commure uses the amazing @blueprintjs/icons package for most of our icons.

Other icon libraries

Font Awesome, Glyphicons, Feather and Font Medical are good alternatives if you don't want to use Commure's icon library.

Designing Icons

Please, follow this guide to create icons for Commure.

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

Guidelines

  • 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.

Language flags

People tend to have pretty strong opinions on whether flags should be used as a visual cue for indicating a language. This is because in many parts of the world the flag may have cultural and geographic meanings that we might not be aware of, or the flag itself may not be fully accurate to the dialects spoken in that region.

While we understand this reasoning, we've found that when a user is not familiar with the currently displayed language, flags somewhat eliminate the use of other mechanisms, such as the name of the language (since the current language could be in an entirely different character set). Given this, there is often at least some familiarity with the identity of a country that speaks a shared language.