Genesys icons library

A React, font-based and SVG icon library built on top of Ionicons, providing an easy and consistent way to use iconography throughout the product.

ReactIoniconsSVGGallery

Github repository SB documentation

My Role

I co-created a React and TypeScript-based icon library that streamlined how teams use and manage icons consistently. Focused on defining the icon set, the architecture, integrating it into the design system, designing and coding the documentation in SB, and establishing the workflow for designers and developers alike.

Overview

The library was created to streamline and standardize iconographyacross product and engineering teams, providing a unified, reusable set of SVG and font-based icons, as well as React components built in TypeScript.

This initiative was part of a broader effort to strengthen the design system's foundations, ensuring that visual language, accessibility, and implementation were coherent across platforms. The result was aversatile icon library capable of evolving alongside the company's design language and development needs.

The Challenge

Before this project, icon usage was fragmented and inconsistent. Multiple teams used different icon sets, naming conventions, and formats, causing visual clutter, confusion, and duplication. This also slowed development, as engineers often had to import or recreate assets manually.

The main challenge was to design a system that would centralize all icons while maintaining flexibility. It needed to work across technologies, support accessibility, and scale easily while remaining maintainable by designers and developers.

Before: Excessive iconsTwo examples of sections before the creation of Genesys Icons, so there is a excessive use of icons, As a result, the usefulness of the icons is lost, because they are representing actions so complex that the icons no longer clarify their meaning, so instead, they add visual noise.

After: Balanced icon usageTwo examples of sections after Genesys Icons, showing intentional icon use only when it reinforces the action.

Process & Collaboration

Designers can easily add new icons by uploading SVG files, while an automated script handles conversion into React components.

We built a living documentation site in Storybook, where each icon is organized, previewed, and explained. It includes a gallery with advanced search based on SVG attributes like title and description.

This process reduced handoff friction and ensured designers and developers remained aligned, always working with the same up-to-date assets.

Development Approach

The library was built entirely in React and TypeScript for type safety and scalability. Each icon component is lightweight, reusable, and performance-optimized, letting developers import only what is needed. This keeps bundle sizes low while maintaining flexibility.

This is the main structure of the project:


/ (root)
├─ .github/
│   └─ … (workflows, templates)
├─ .storybook/
│   └─ … (Storybook config)
├─ icons/ (the SVG icon set)
├─ scripts/ (to generate components from SVGs)
├─ src/ (React components, utils... etc.)
│   ├── /components
│   │   ├── /IconBase
│   │   │   ├── IconBase.test.tsx
│   │   │   ├── IconBase.tsx
│   │   │   └── index.ts
│   ├── /context
│   └── index.ts
├─ stories/
├─ test/
├─ vendor/
│   └─ original_project/
├─ .gitignore
├─ .prettierrc
├── package.json
├── tsconfig.json
├── README.md
└── … other configuration files (config, oxlintrc, …)

Anyway, this is just an excerpt of the project structure to give you an idea of how it's organized. This is the link to Github repository in case you want to check more details

We also implemented automated testing and version control through GitHub Actions, ensuring safe deployments via npm. This maintained visual and technical integrity as the system scaled.

Impact & Outcomes

Consistency and collaboration

The new icon library immediately improved cross-team collaboration, and the centralized system accelerated onboarding for new contributors.

Reduced developing time

Development time for adding or updating icons dropped over 50%, while visual inconsistencies across products were nearly eliminated.

Improved the design system

The design system became more robust and reliable, contributing to a cohesive user experience and consistent brand perception.

Storybook documentation for iconsThe Storybook documentation is built around a gallery that lets designers and developers search icons by name or related tags. It also provides live previews, the option to copy the icon name for font usage, download the asset, copy its React component definition, or directly download the SVG.

React version playgroundThe Icon React component playground on Storybook: designers and developers can tweak component props, preview changes in real time, and easily copy the resulting code

Learnings & Next Steps

This project highlighted the importance of creating a shared language that empowers designers and developers. Automating repetitive tasks, such as component generation and documentation, freed time for creative problem-solving and higher-level system thinking.

Looking forward, next steps include expanding the library with new icon sets, and especially enhancing the Storybook gallery search through semantic naming and accurate, descriptive tags.