DISCOVER PROJECT

DISCOVER PROJECT

Personal project: custom vector icons kit

Designing a SaaS Application Icon Set

Creating a set of the 25 most frequently used SaaS software icons

JULY 2025

By reimagining the top 25 SaaS application icons, I aimed to create a set that feels both familiar and refreshingly refined, demonstrating my ability to craft custom UI assets that integrate seamlessly into digital products.

SERVICES

UI & Visual Design, Colors Fonts & Icons, Design Systems, UI Foundation & Components

before

before

before

after

after

after

Project Overview

A cohesive vector kit of 25 essential SaaS icons, designed for clarity, consistency, and seamless integration into modern interfaces.

Each icon is carefully crafted for scalability and versatility, ensuring clear communication at any size. Perfect for dashboards, apps, and design systems seeking a professional, modern, and unified visual language.

The set includes essential SaaS actions spanning navigation, user management, communication, and data handling. With consistent line weight, balanced shapes, and modern styling, these icons integrate seamlessly into a Saas design system, ensuring cohesive, intuitive user experiences across dashboards, apps, and complex digital products.

Approach

after

before

after

before

after

before

Setting the scene with the production team

I researched top SaaS icons and crafted a consistent, scalable style using standardized strokes and shapes, utilizing Figma’s latest vector tools to ensure precision, clarity, and versatility across various digital interfaces.

This project was a great opportunity to perfect my skills using Figma’s latest icon creation features. It enabled me to design a consistent, scalable icon set that balances clarity and versatility, ensuring seamless integration and a polished look.

Process

To create this icon set, I researched the top 10 trending icons for each category to understand current design directions. I then gathered real-life reference images like houses, keys, and bells to inform accurate shapes.

Using Figma’s pen tool along with the circle, rectangle, and star tools, I hand-drew each icon, continually comparing them to popular designs and making adjustments to keep the set modern and recognizable. I also created a navigation component with list item variants, placing the icons inside to test their size and appearance alongside each other. This helped ensure visual balance and consistency throughout the entire set.

before

before

before

after

after

after

I believe icons should be simple yet meaningful, clear enough to guide, intuitive enough for effortless use. This set strives for that perfect balance, blending modern clarity with friendly familiarity.

Final Design

Cohesive, Consistent Visual Style

Cohesive, Consistent Visual Style

Scalability And Clarity

Scalability And Clarity

Precision Using Figma Tools

Precision Using Figma Tools

Modern, Intuitive Iconography

Modern, Intuitive Iconography

Over a few months, I designed three to four icons weekly, refining each carefully to ensure consistent quality, clarity, and thoughtful detail throughout the entire icon set.

FINISH THIS - SHOULD BE 2 PARAGRAPHS WITH SPACE BETWEEN

Product Images

MORGAN SHAFFER

My current time

21:46

Portland (GMT-8)

Copyright © 2025 morganshaffer.com

MORGAN SHAFFER

Copyright © 2025 morganshaffer.com

MORGAN SHAFFER

Copyright © 2025 morganshaffer.com