Functional Icons Style Overview

Functional icons perform an action or navigates a user to a page to perform the action. These icons have state: enabled, disabled, hover and selected.

Never use functional icons as a way to beautify a page or uncluttered a form --use qualifier icons instead. By design, functional icons are subdued to give rise to page content over page functions (i.e., chrome). Over-populating the page with functional icons for decorative purposes defeats the goal of functional icons

Color Palette


Functional Icons 16px SAMPLES

sample Func

Functional Icon States

states Func

Size Constraints

Functional Icons are primarily 16x16 pixel size icon with a label.

Functional Icons with Buttons

Please note that the icon samples below are not a reflection of content that would actually be placed in a tool-bar. It's a representation of the various combinations of functional icons that are placed in a menu, button with text and stand alone icons. Iconic buttons can be also used but are not encouraged.

func Icons with Buttons