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:

<img op-icon icon="circle-check" smart="true" size="md" />

Not using op-icon:

<img data-src="opattern-icons/svg/smart/circle-check.svg" class="iconic iconic-md" />

Flat icons:

<img data-src="opattern-icons/svg/flattened/circle-check-md.svg" class="iconic"/>

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:

<img op-icon icon="warning" smart="true" size="md" />
<img op-icon icon="circle-warning" smart="true" size="md" />

Not using op-icon:

<img data-src="opattern-icons/svg/smart/warning.svg" class="iconic iconic-md" />
<img data-src="opattern-icons/svg/smart/circle-warning.svg" class="iconic iconic-md" />

Flat icons:

<img data-src="opattern-icons/svg/flattened/warning.svg" class="iconic"/>
<img data-src="opattern-icons/svg/flattened/circle-warning.svg" class="iconic"/>

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:

<img op-icon icon="smiley" class="smiley-color" smart="true" size="md" data-smiley-expression="excited" />
<img op-icon icon="smiley" class="smiley-color" smart="true" size="md" data-smiley-expression="happy" />
<img op-icon icon="smiley" class="smiley-color" smart="true" size="md" data-smiley-expression="indifferent" />

Not using op-icon:

<img data-src="opattern-icons/svg/smart/smiley.svg" class="smiley-color iconic iconic-md" data-smiley-expression="excited"/>
<img data-src="opattern-icons/svg/smart/smiley.svg" class="smiley-color iconic iconic-md" data-smiley-expression="happy"/>
<img data-src="opattern-icons/svg/smart/smiley.svg" class="smiley-color iconic iconic-md" data-smiley-expression="indifferent"/>

Flat icons:

<img data-src="opattern-icons/svg/flattened/smiley-excited-md.svg" class="smiley-color iconic"/>
<img data-src="opattern-icons/svg/flattened/smiley-happy-md.svg" class="smiley-color iconic"/>
<img data-src="opattern-icons/svg/flattened/smiley-indifferent-md.svg" class="smiley-color iconic"/>

More icons

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

File Name When to use
check To indicate completion or to differentiate between good and bad options
x To close a window or cancel an action
circle-x As an error or to show an operation has failed
ban To mark something as incorrect or unselectable
circle-question To show that help or extra information is available, or to indicate the presence of a tooltip
arrow To imply direction or motion
caret To imply that more content is visible after interacting
chevron To indicate pagination or that this element exists as one in a sequence
share To imply that this content can be shared or exported
electric To represent electricity
fire To represent natural gas
cog To indicate configuration or extra options
circle-phone To draw attention to a phone number
envelope To represent email, regular mail, or to imply correspondence
cloud To flag weather-related information
cloudy To flag weather-related information
lightning-bolt To imply stormy or hazardous weather
rainy To flag weather-related information
sun To flag weather-related information or solar energy
moon To imply nighttime or sleep
star To indicate a rating or favorite
magnifying-glass To indicate a search function
people To represent many users or people
person To represent the active user or person
lock To 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
Size Suffix Width
Small -sm ≤ 16px
Medium -md 17px - 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 <img> element to the corresponding image in Iconic’s /flattened/ directory.

{% toggleText('icon-size-example-sass') %}
<img data-src="opattern-icons/svg/flattened/rocket-md.svg" />
<img data-src="opattern-icons/svg/flattened/bug-md.svg" />
<img data-src="opattern-icons/svg/flattened/chat-md.svg" />
<img data-src="opattern-icons/svg/flattened/electric-md.svg" />

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') %}
<img data-src="opattern-icons/svg/smart/eye.svg" class="iconic iconic-md" />
<img data-src="opattern-icons/svg/smart/fire.svg" class="iconic iconic-md" />
<img data-src="opattern-icons/svg/smart/graph.svg" class="iconic iconic-md" />
<img data-src="opattern-icons/svg/smart/hand.svg" class="iconic iconic-md" />

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') %}
<img data-src="opattern-icons/svg/flattened/image-landscape-md.svg" class="icon iconic" />
.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') %}
<img data-src="opattern-icons/svg/smart/image.svg" class="icon iconic iconic-lg" />
.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
]);
<img op-icon icon="circle-check" size="lg" />
Attribute Description Type Default
icon= The file name of the icon string undefined
size= The icon’s size string, one of [lg, md, sm] md
path= Relative URL to the directory containing the icon string Defaults to the icon’s location in the Maestro filesystem
smart= Enables Iconic’s full featureset, including dynamic sizing boolean false
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