- Tools and Artefacts
- Coming soon!
- Getting started
- Designers
- Developers
- About
- Explore Getting started
- Designers
- Developers
- About
- Foundations
- Motion guidelines
- Icon guidelines
- Explore Foundations
- Motion guidelines
- Icon guidelines
- Components
- Explore Components
Icon guidelines
Icons are visual representations of commands, devices, directories or common actions.
Introduction
Nedbank’s system icons are a key part of our visual identity, designed to ensure consistency and brand recognition across all digital platforms. These icons are used in our online banking systems, mobile apps and other digital services to help you navigate and perform various banking tasks efficiently.
For design or development purposes, you can find a variety of Nedbank icons available for download in formats like SVG, PNG and GIF on platforms like IconScout. These icons come in various styles including flat, coloured outline, line, glyph, and isometric, making them versatile for different design needs.
Why icons matters
Icons bring our digital interfaces to life, guiding users through their journey and making interactions more enjoyable. It helps with the following:
System icons
Our system icons are now accessible for teams to leverage and are integrated into the latest components across web and app platforms.
System icon anatomy
Icons should be used intentionally to maximise comprehension and reduce cognitive load. We use icons primarily for calls to action and commands, or to go to specific sections.
- Grid area: The foundation where the grid construction is set.
- The icon: The visual element itself.
- Canvas area: The space where the icon is confined.
Our icon behaviour
Our icons are designed on a 20 px scale grid and exported on a 24 px canvas size. Use icons to maximise comprehension and reduce cognitive load, especially when your need to draw attention to a specific action, command or section. Each icon embodies our brand personality.
Best practices
It’s always best to align with the existing icon set in our library to maintain a consistent design style and avoid brand confusion.
Our system icons are designed to be used progressively and meaningfully, supporting users by providing clear context to calls to action. Ensure that icons are accompanied by text that enhances user understanding, especially in scenarios where the icon alone may not be fully understood.
Need help? Get in touch.
For help or if you want to collaborate with the Design System Team, please reach out to them via the following channels:
Email: elements@nedbank.co.za
Teams: Design system — Queries