HSBC Iconography
UX, UI and Illustration - HSBC
TL;DR
As part of HSBC’s North Star redesign, our team led the creation of a comprehensive pictogram system to represent complex financial products across the mobile app visually. After delivering the initial set, Stuart Oakley, a great designer, and I worked with the Global Brand team to refine and expand the system.
Together, we built a unified, scalable library of 236 pictograms, blending metaphor-driven design, strict visual logic, and cross-team alignment to help users navigate abstract financial services with clarity and confidence.
-
A: This icon set was part of the broader North Star visual asset initiative at HSBC. The aim was to create a cohesive, scalable system that would support digital products with clear, flexible visuals.
-
A: Unlike typical interface icons, these assets needed to function as both identifiers and visual accents—almost like micro-branding for each product or service. They had to be expressive without becoming distracting.
-
While structurally similar, these icons are more compact and widely used. They're designed for functional UI use like labelling, highlighting, or navigation, where pictograms often represent ideas at a broader conceptual level.
Overview
These icons were developed as part of the HSBC North Star visual asset library, alongside pictograms, illustrations, and motion assets. Built for consistency and adaptability, they help unify product and service interfaces across HSBC’s global ecosystem.
Structurally related to the pictogram set, these icons serve a broader role. Acting as compact identifiers, they offer both navigation and subtle branding while appearing on dashboards, journey screens, and account views wherever visual context or emphasis is needed.
