Icons

An icon works best as a small, non-decorative helper that represents a concept.

Icons are helpful, but overusing them can make an interface hard to scan. Icons should never be used decoratively or as ornamentation. Good use of an icon should:

  • Make sense: Icons should be simple but recognizable.
  • Be helpful: Use icons with reason and purpose, not as decoration. They should help users understand things and complete actions.
  • Fit the context: Opattern has a big library of icons to choose from, but every icon is best for one specific action or element.

Iconic

Opattern uses an icon library called Iconic, which contains hundreds of icon variations in .svg and .png formats. These icons are simple, recognizable, and customizable. Also, they look great alongside other Opattern elements.

  • Use SVGs for web and print, use PNGs for email
  • Use iconic.js to create smart, responsive icons

Common icons

Positive feedback

`circle-check`

Understanding energy information can be tough, but icons can simplify whether an energy-related outcome is good or bad. The circle-check icon is reserved for expressing good or expected outcomes.

  • Use to describe good, expected, or positive energy-related outcomes
  • Don’t use this icon for outcomes outside the user’s control
{% toggleText('positive') %}

Using op-icon:


Not using op-icon:


Flat icons:


Negative feedback

`warning`
`circle-warning`

The warning and circle-warning icons are reserved for expressing negative or unexpected outcomes: they’re good at flagging problems or atypical outcomes. For example: a user’s energy bill is projected to be higher than usual.

  • Use to describe negative or unexpected energy-related outcomes
  • Don’t use this icon for application errors
{% toggleText('negative') %}

Using op-icon:



Not using op-icon:



Flat icons:



Human feedback

`smiley-excited`
`smiley-happy`
`smiley-indifferent`

The smiley and its variants are useful for describing energy outcomes in an abstract way. Faces are friendlier than symbols and can express more complex outcomes than just “good” or “bad.” You’ll notice that there is no smiley with a frown. That’s intentional—frowns lead to feelings of judgement and negativity, which we want to avoid.

  • Use to describe complex energy-related outcomes
  • Don’t use these icons for application feedback: they’re reserved for energy behavior
{% toggleText('smiley') %}

Using op-icon:




Not using op-icon:




Flat icons:




More icons

While Iconic has hundreds of icons in its library, we use a few icons more often than others.

File NameWhen to use
checkTo indicate completion or to differentiate between good and bad options
xTo close a window or cancel an action
circle-xAs an error or to show an operation has failed
banTo mark something as incorrect or unselectable
circle-questionTo show that help or extra information is available, or to indicate the presence of a tooltip
arrowTo imply direction or motion
caretTo imply that more content is visible after interacting
chevronTo indicate pagination or that this element exists as one in a sequence
shareTo imply that this content can be shared or exported
electricTo represent electricity
fireTo represent natural gas
cogTo indicate configuration or extra options
circle-phoneTo draw attention to a phone number
envelopeTo represent email, regular mail, or to imply correspondence
cloudTo flag weather-related information
cloudyTo flag weather-related information
lightning-boltTo imply stormy or hazardous weather
rainyTo flag weather-related information
sunTo flag weather-related information or solar energy
moonTo imply nighttime or sleep
starTo indicate a rating or favorite
magnifying-glassTo indicate a search function
peopleTo represent many users or people
personTo represent the active user or person
lockTo indicate that a feature or information is locked or temporarily unavailable

Icon sizing

There are two methods for sizing Iconic icons: with iconic.js script or with CSS. In either option, we stick to 3 common sizes:

small
medium
large
SizeSuffixWidth
Small-sm≤ 16px
Medium-md17px - 127px
Large-lg≥ 128px

Every Iconic icon comes in 3 unique versions suited to these sizes, as you can see above. The smallest version is as simple as possible to maintain recognition at a smaller size, whereas larger icons come packed with details.

Simple sizing: There are 3 different SVG files for each of the sizes above. To use one of these sizes, simply point an element to the corresponding image in Iconic’s /flattened/ directory.

{% toggleText('icon-size-example-sass') %}




Sizing with Javascript: To tap into Iconic’s dynamic sizing, make sure to include iconic.js on the page and point to one of the smart icons. After that, you can size the icon by adding one of Iconic’s size classes (iconic-sm, iconic-md, and iconic-lg).

If you’re using AngularJS, we made sizing even easier—check out the Icons in AngularJS section below.

{% toggleText('icon-size-example') %}




In addition to the iconic-sm, iconic-md, and iconic-lg classes, you can use the iconic-fluid class. This tells Iconic to dynamically choose the best size to fit the space.

Icon colors

With the Opattern approach of inlining SVG code, it’s easy to customize icon colors. Simply target the icon in your stylesheet and apply any color with the fill property.

{% toggleText('one-color-example') %}

.icon {
    fill: $primary-color;
}

If you’re using smart icons, Iconic also adds unique classes to every discreet shape in the SVG which you can use to create multi-colored icons. Smart icons are a mix of fills and strokes, so you can use both the fill and stroke CSS properties to add color.

{% toggleText('multi-color-example') %}

.icon {
    .iconic-image-landscape-frame {
        stroke: $primary-color;
    }
    .iconic-image-landscape-mountain-front {
        fill: $success-color;
    }
    .iconic-image-landscape-mountain-back {
        fill: $success-color;
    }
    .iconic-image-landscape-sun {
        fill: $alert-color;
    }
}

To check out Opattern’s color palette, head to the Colors page. To see the available CSS selectors you can use to apply colors to Iconic icons, go to the Iconic documentation.

Icons in AngularJS

If you’re developing on the Nextweb platform or otherwise using AngularJS, you can easily add Opattern icons to your app with the op-icon directive, which implements iconic.js and inlines the SVG icon onto the page.

{% toggleText('op-icon') %}
$ npm install opattern-angular
// Inject op-icon as a dependency
angular.module('your-angular-app', [
    require('opattern-angular/directives/op-icon').name,
    // ... more injected dependencies
]);

AttributeDescriptionTypeDefault
icon=The file name of the iconstringundefined
size=The icon’s sizestring, one of [lg, md, sm]md
path=Relative URL to the directory containing the iconstringDefaults to the icon’s location in the Maestro filesystem
smart=Enables Iconic’s full featureset, including dynamic sizingbooleanfalse
direction=Changes the orientation of the icon. Only available for some icons, particularly those that are directional in nature (arrows, carets, etc.)string, one of [top, right, bottom, left]null