Isocons

Example

HTML code


Jinja2 template code for Wagtail CMS


Isocons are visually sophisticated graphics, with more detail than a flat icon. By using an isometric view and arrows, isocons are able to go beyond simply showing objects and can indicate important actions and transactions.

Graph Isocon

Stylistic guidelines

Basic color approach

The basic color approach for isocons uses the primary brand colors. The isocon has black strokes with white fill. This approach should be used when there are several isocons together on a page.

Black and white on green field

Black and white on green field Graph Isocon

Black and white on gray field

Black and white over gray field Graph Isocon

Scaling

Padding varies around each isocon, but all are relatively scaled within a bounding box. These scales represent the maximum and minimum for web and print applications.

Web scale

Isocon web scale diagram


Isocon print scale diagram

Asset library

This library comprises all currently approved isocons and will continue to expand when new assets are developed, as needed.

Ask CFPB

Ask CFPB isocon

Submit a complaint

Submit a complaint isocon

Review and route

Review and route isocon

Company response

Company response isocon

Educate

Educate isocon

Consumer review

Consumer review isocon

Review and investigate

Review and investigate isocon

Analyze and report

Analyze and report isocon

Data

Data isocon

Developers

Developers isocon

Loan

Loan isocon

Payday loan

Payday loan isocon

Credit card

Credit card isocon

Credit reporting

Credit reporting isocon

Bank account or service

Bank account or service isocon

Getting cash quick

Getting cash quick isocon

Getting out of debt

Getting out of debt isocon

Money transfer

Money transfer isocon

Owning a home

Owning a home isocon

News

News isocon

Empower

Empower isocon

Enforce

Enforce isocon