Custom Icon Library

Custom Icon Library

Custom Icon Library

Custom Icon Library

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

Print

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

Keith Murphy

UI Designer

Contact

(248) 878-5538

uibykmurphy@gmail.com

Keith Murphy Portfolio 2024

Keith Murphy

UI Designer

Contact

(248) 878-5538

uibykmurphy@gmail.com

Keith Murphy Portfolio 2024