Icon Set

Tronic Smart Wallet Icon Design

The images provided represent just 3% of the complete icon library designed for the Tronic Smart Wallet Design System.

Overview

As part of the Tronic Smart Wallet Design System, I was tasked with designing a cohesive set of icons to streamline the experience for both designers and developers. The goal was to create a scalable iconography system that could be easily implemented across various touchpoints in the product, maintaining consistency and clarity regardless of size or state.

Challenge

Our team needed an icon system that would work across different screen sizes while preserving visual clarity. Each icon had to follow specific guidelines for stroke width and responsiveness to user interaction, including hover, disabled, and default states. It was essential that the design not only adhered to aesthetic standards but also enhanced usability through a consistent visual language.

Approach

I designed the icons following strict guidelines for stroke width and opacity, ensuring scalability and ease of use within our design system. The icons were created for three primary sizes, each with unique stroke widths to maintain balance and clarity at various resolutions:

• 16px icons: Stroke width of 1px

• 24px icons: Stroke width of 1.5px

• 32px icons: Stroke width of 2px

Additionally, I developed a set of interaction states to accommodate different user scenarios:

• Default State: Icons are displayed with 100% opacity, ensuring maximum clarity and visibility.

• Hovered State: A slight visual distinction was added by setting the stroke to 100% opacity while the fill opacity was reduced to 30%, providing subtle feedback without overwhelming the user.

• Disabled State: To indicate inactivity, the icons are set to 30% opacity, clearly communicating a non-interactive state.

Implementation

The icon set was integrated into the Tronic Smart Wallet Design System, which serves as a resource for our team of designers and developers. The system includes detailed guidelines to ensure proper implementation across various touchpoints. By adhering to the stroke width and opacity standards, the icons maintain their clarity and readability, whether in default, hovered, or disabled states.

Outcome

The icons have been successfully adopted across the product, providing a consistent visual experience. Their scalable design, paired with clear interaction states, has made them an integral part of the Tronic Smart Wallet interface. Feedback from both designers and developers has been overwhelmingly positive, particularly regarding the ease of implementation and the consistency it brings to the system.