Opattern | Icons

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

View all icons

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 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
]);

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`