Iconography

When drawing or compositing investing-centered icons, consider the subject matter and any established visual conventions; the icon’s metaphor should feel clear and intuitive to most users. The fundamentals outlined in this section can also guide other types of illustration.

Icon grid frame, padding, and keylines. — Icons are drawn on a 48×48 px grid frame that is further subdivided into gridlines 1 px apart. Keylines indicate the recommended shape, position, and size of the artwork within the grid frame for optimal optical balance.

Padding

Icon within the padding zone. — Do keep artwork within the padding area.

Icon expanding into padding zone. — Avoid allowing the artwork to encroach on the padding area.

Keylines

Tall icons. — Tall icons may extend into the padding area for better optical balance.

Wide icons. — Wide icons may extend into the padding area for better optical balance.

Square icons. — Square icons tend to sit neatly within the keyline and padding.

Circle icons. — Circular icons tend to sit neatly within the keyline and padding.

Stroke aligned to the grid. — Cloud icon with close up of 1 pixel stroke.

Stroke aligned to the grid. — Do align strokes to the grid.

Stroke not aligned to grid. — Don’t draw lines in between gridlines.

Alignment

Vertices aligned to grid. — Do ensure vertices align to the grid.

Vertices not aligned to grid. — Avoid placing vertices off the grid.

Do scale the icon and stroke weight proportionally.

Don’t maintain the stroke weight when scaling the icon.

Icon with different stroke weights. — Don’t mix different stroke weights within the same icon.

End Points

Icons are drawn with round end point strokes.

Icon with round end point. — Do use round end points.

Icon with square end point. — Don’t use square end points.

Breaks

Icon with joined lines. — Do join all lines in the icon.

Icon with line breaks. — Avoid decorative line breaks unless they help clarify the idea of an object.

As a general rule, icons are drawn with miter corners.

Bank note icon with close up of miter corner. — Select miter joins in your chosen design software.

Materiality

If an icon is depicting an object with round forms, then draw it with round corners.

Bank note with round corner. — Avoid drawing round corners when depicting objects that do not have them.

Bar chart with round corner. — Don’t apply round corners for decorative effect.

Angles

Diagram showing 360 degrees at 15 degree increments with detail view of an icon with a 90 degree corner. — As a general rule, angles are drawn at 15-degree increments. By doing so, visual consistency can be maintained across all icons.

Person with 75 degree corner at neckline. — Do draw angles at 15-degree increments.

Person icon with 62 degree corner at neckline. — Avoid arbitrary angles.

Squares with corner radii at 2 pixel increments. — When drawing round corners, use a radius size from a multiple of 2 px.

The paired speech bubble icon has a round corner radius of 4 px.

The single speech bubble has a round corner radius of 6 px.

Concentric shapes with proportional and optical scaling. — Concentric rounded corners may require optical adjustments to their radii, rather than proportional scaling, for a more natural appearance.

Graph with green outlined dots. — Do use outlined dots to bring visual balance to an icon.

Pig icon with filled green dot for an eye. — Do use filled dots for decorative moments or to retain optical balance within an icon.

Book icon with detail view of a 2 pixel space between strokes. — Leave a minimum spacing of 2 px between strokes to maintain consistent visual density across all other icons.

Icons with shared curves and forms. — Replicating curves or forms among icons helps bring consistency to the look and feel across all icons.

Data server depicted in two dimensions. — Do depict objects on a two-dimensional plane.

Three-dimensional depictions of objects. — Avoid three-dimensional depictions of objects.

Outline icon of paired speech bubbles. — Do use the same icon expression throughout the entire icon. See more on Expressions.

Outline icon of paired speech bubbles with a filled in section. — Don’t mix icon expressions.

Enclosure

Icon with detail view of two separate icons. — Icons may be combined to add specificity to or change its meaning. The intended metaphor, however, should always strive to remain clear and intuitive.

Calendar with plus sign in different stroke weight. — Don’t combine different stroke weights.

Calendar with crosses in dates. — Avoid overly dense or complicated embellishments.

Price tag with drawn dollar symbol. — Do use drawn symbols or glyphs.

Price tag with font dollar symbol. — Don’t use font symbols or glyphs.

Overlap

Icon with detail view of two separate icons. — An icon may be superimposed on one another to show overlap. As a general rule, line breaks are not used.

Icon with detail view of two separate icons. — Line breaks may be selectively used to clarify the boundaries between two objects and remove ambiguity in meaning. Avoid using breaks for decorative effect.

Overly complex composite icon consisting of many individual icons. — Avoid overly complex composites. An icon's metaphor should be simple and understood intuitively.

Connectors

Icon with detail view of two separate icons. — Lines connecting icons can help define a relationship between two objects.

Line connecting two icons with line break. — Do use breaks between lines and objects.

Line connecting two icons without line break. — Avoid connecting lines to objects.

Icons can serve as visual shortcuts. However, shortcuts can sometimes be stereotype-confirming, so we should strive to always find commonality when depicting people, things, ideas, or actions.

Man and woman side-by-side in icon. — Be mindful of implicit biases when depicting people, things, or ideas.

Toilet icon. — Look for commonality when choosing people, things, or ideas to depict.

Formatting

Iconography