Iconography

Pictograms

Our pictograms are used to depict a range of subjects, products, services, applications, and functions. They are used as a visual cue to help quickly communicate a theme, idea, or topic. They help simplify and delineate complex layouts, creating simpler, more impactful designs. Always use pictograms that are relevant to the topic you are communicating.

Pictograms are never used for decoration, are not illustrations, and they should not be used in place of illustrations. Illustrations are in progress and guidelines will be added in the coming months.

Note: BlackRock pictograms always contain three brand colors: orange, yellow and pink. Pictograms (and illustrations) are never to be used on any background color other than black or white.

Pictogram sizes

Our pictograms look best when sized between a minimum of 72px and a maximum of 144px. This aligns to our 8px grid system.

This is just a recommendation, and you may need to use the pictograms at a slightly larger size depending on your design needs.

Note: The magenta box is illustrating the container size.

Pictograms vs illustrations

We use pictograms at a much smaller scale than we use our illustrations. We use them to depict a range of subjects, products, services, applications, and functions. The pictograms should always be associated with descriptive text.

Pictograms are not illustrations, and they should not be used in place of illustrations.

Illustrations are best used when it does something photography can’t. Our illustrations are used as metaphors to help visualize a range of complex topics in an engaging way. Illustrations contain more detail and nuance.

Do. Use pictograms to depict a range of subjects or products.

Do. Use illustrations in an intelligent way to help communicate a complex topic.

Don’t. Don’t use pictograms at this scale.

Additional do nots

Curated pictogram library

In partnership with Global Creative Services, a pictogram library was created for digital use around BlackRock’s properties (web, apps, tools, etc.). Just grab the code name(s), and send them to your publisher, no need to cut any assets.

Note: Only use the dox site to view the pictograms. We have a TeamSite library already optimized as .svg assets to pull from. See Rules section below for .svg directory.

This digital pictogram menu is subject to changes based on future evolution by the Creative Service team. For more information, please contact Creative Services.

Rules and recommendations

Functional icons

Functional, or system icons represent very specific user interface actions. They should depict a clickable action or command - download, share, print, search, etc.

At BlackRock, we leverage the Font Awesome 5 Pro font toolkit. Font Awesome provides scalable vector icons that can instantly be customized without losing any of the details and nuances.

Font Awesome is loaded in our CSS, so there is nothing more than giving the icon unicode to developers to implement it.

Note: Functional icons should never be abstract. Consistency is key to ensure they are universally recognized across our interfaces.

Functional icon sizes

Our functional icons are set to specific sizes across our component system. Generally, we use 16px icons for CTAs, but there are also varying sizes used across our platforms, such as search bars, “close” triggers, tools/application functions, etc.

This is just a recommendation, and you may need to use the functional icons at a slightly different size depending on your design needs.These should match our 8px grid system.

Note: The magenta box is illustrating the recommended container size.

Additional do nots

Don’t. Don’t use functional icons in place of pictograms.

Don’t. Don’t use functional icons as decoration or in place of illustrations.

FontAwesome 5 Pro

For standard usage, please use the icons listed below to ensure consistency across products & interactions. All icons are part of the Font Awesome 5 Pro font toolkit. This list describes which icon is used for what kind of action along with its Font Awesome name (in parenthesis) and font weight (solid/light/etc.)

This is a WIP and may change according to UX team alignment discussions.