The Goal
In my work on multiple projects for Resolute Building Intelligence, I noticed a need for a cohesive, versatile icon library that could meet various UI requirements and maintain a consistent visual language across our digital products. Existing libraries often fell short in providing icons that matched both the functional and aesthetic needs of our applications, leading to time-consuming searches and frequent custom creations. To address this, I designed a unified icon library to ensure consistency, efficiency, and adaptability in our interfaces. Drawing inspiration from Google and IBM’s icon libraries, I crafted each icon on a 32x32 pixel grid in Adobe Illustrator, focusing on clarity, scalability, and alignment with our brand’s visual standards.
Icon Grid
The Grid
The grid is a 32x32 px grid with a 2 px margin.
Guides
Within the grid I set up guides for basic shapes and alignments.
Designing With The Grid
Each icon in the library is designed with a consistent 2px stroke and a 2px minimum gap between elements. Maintaining the same stroke width across all icons ensures visual harmony and consistency throughout the collection. The 2px minimum gap is crucial for legibility, especially at smaller sizes, as it preserves the clarity of icon details. This thoughtful balance between stroke and spacing ensures that each icon remains visually coherent and legible, regardless of its size or context within the UI.
UI Examples
Icon Library
Expand Navigation
Create Action
View History
Settings
Upload
Collapse Navigation
View Action
Watch
Group
Download
Expand Down
Branding
View Report
Ungroup
Export
Bookmarks Folder
Collapse Up
View Trends
Copy Link
Save
Expand Chart
Bookmark
Date Picker
Send
Delete
View Bookmark
Collapse Chart
Type
Refresh
Widgets
Line Chart
Bar Chart
Stacked Bar Chart
Boolean Chart
Data Table
Pie Chart
Donut Chart
KPI
Speedometer
Bubble Chart
Scatter Plot
Heatmap
Dataset
Edit Dataset
Add Dataset
VPN
VPN Connection
Multi-Facto
Authentication
Secure Cloud
Connection
Secure Cloud
Connection Alt
Announcement
Relationships
Tips
Help
Information
Attention
Configuration
Data Audit
Connectors
Point Mapper
Point Audit
Point Tagging
Equipment Tagging
Asset Relationsips
Reports
Custom Dashboards
Computed Points
Site Editor
User Activity
Job Status
Rules
Energy Usage
User Management
Action Center
Site Overview
Explorer
Dashboards
Document Center
Reports Library