Riot Games – Iconography Design System

 

Pengu

Dan

Tacibear

Poro

 

Client Project

—
Riot Games – Iconography Design System
Monotype hired MKN Design to assist in leading Riot Games’ development of a custom, scalable iconography system. We oversaw iterative design, cross-team collaboration, and standards development, culminating in the delivery of an iconography library, which supports the brand’s growing product ecosystem and strengthens its visual language. Over the project’s six-month period, I co-led the effort as the icon systems specialist. My role focused on guiding, developing, and establishing standards that shaped a comprehensive toolkit of pixel-perfect icons, capturing the bold and playful spirit of Riot Games.

The goal of this project was to create a cohesive iconography system of 350+ icons that scaled seamlessly across three sizes—16, 24, and 32 pixels—while staying true to Riot Games’ brand. The system was designed to be bespoke, scalable, and unified—enhancing the user experience, reinforcing the brand’s visual language, and ensuring consistency across all Riot products.

The process involved research, iterative design, and collaboration across Monotype and Riot teams to ensure each icon met functional and aesthetic requirements. Every icon was carefully crafted to be pixel-perfect, visually cohesive, and easily recognizable at multiple sizes. This iconography system not only provides a sustainable foundation for developing future icons that align with Riot’s brand but also streamlines workflow, supports cross-product consistency, and strengthens the overall player experience.

←
Learn more about the process of developing and crafting this extensive iconography set.

“MKN Design played a key role in developing a strategic and refined iconography library for Riot Games. Their leadership and guidance across both Monotype and Riot Games ensured seamless collaboration, aligning the visual identity with brand goals through a thoughtful and systematic approach. They demonstrated the ability to solve complex design challenges while maintaining keen attention to detail, making a significant impact on the project’s success. Reliable, communicative, and consistently exceeding expectations.”

Robert Ignasiak
Product & Interaction Lead, Riot Games

 

  • Monotype & Riot Games
    Video Game Software & Entertainment

  • Iconography Design System

  • + Client Liaison
    + Co-Leadership
    + Brand Advisor
    + Design Direction
    + Design Ideation
    + Iconography System Design
    + Iconography System Guidelines
    + Illustration
    + Qualitative Research
    + Visual QA & Testing

Wildlife Conservation Illustrations

Creative Musing
August 2021

__
Wildlife Conservation Illustrations
In August, I participated in the Souldoodles illustration challenge focused on wildlife conservation, where I illustrated three endangered animals. Information about each animal can be found under the accordion dropdown to the right.

  • African Savanna Elephants are the largest species of elephant and the biggest terrestrial animal on Earth. They are easily distinguished by their very large ears and front legs which are noticeably longer than the hind legs. Each family unit usually consists of around 10 females and their calves, and the bulls associate with these herds only during mating. Several family units often join together to form a “clan” consisting of up to several hundred members led by a female matriarch.

  • White rhinos are the second largest land mammal and their name comes from the Afrikaan’s, As of March 2018, there are only two rhinos of the northern white rhino left, both of which are female. They live in the Ol Pejeta Conservancy in Kenya and are protected round-the-clock by armed guards. Their near extinction is due to decades of rampant poaching for rhino horn. White rhinos have complex social structures. Groups of sometimes 14 rhinos may form, notably females with calves.

  • The green turtle is one of the largest sea turtles and the only herbivore among the different species. Green turtles are found mainly in tropical and subtropical waters. Like other sea turtles, they migrate long distances between feeding grounds and the beaches from where they hatched. Classified as endangered, green turtles are threatened by over harvesting of their eggs, hunting of adults, being caught in fishing gear, and loss of nesting beach sites.

Stayhome Friends

Creative Musing + Product
May 2020

__
Stayhome Friends
Amidst the U.S. stay-at-home mandate, I crafted a series of playful illustrations, each carrying messages specifically designed for the stay-at-home orders. These illustrations served not only to entertain but also to reinforce the importance of staying home during this time.

Adobe Characters

Creative Musing
October 2019

__
Adobe Characters
Adobe Illustrator tools transformed into energetic walking, skateboarding, and roller skating characters. Right image characters names, from left to right: direct select, pen, magic wand, selection, sprayer, color palette, hand, eraser, brush, fill box, eyedropper, measure ruler, slice, stroke, layers palette and Adobe Illustrator mark.

 

Tree Frog

Creative Musing
May 2019

__
Tree Frog
When building iconography or logo marks, it's essential to ensure that the subject remains recognizable even when scaled down to small sizes. There are no rigid rules regarding icon sizing; it varies based on their usage in digital interfaces and/or printed materials. The graphic above showcases typical icon sizes. It's clear that the smallest icon (16 px) needs adjustments for better recognizability. Depending on application, the smallest size could be increased to 32 px.

 

Ancestry DNA – Visual Design System

Client Project

—
Ancestry DNA – Visual Design System
We helped Ancestry DNA, a leader in genealogy and genomics, define and develop a unified visual language system for their trait products using an iterative, user-driven framework.

The initiative focused on two primary objectives: to create a cohesive system of conceptual trait illustrations that helped users explore how their genes influence physical, nutritional, and sensory traits, and to ensure the visuals remained appropriately abstract, avoiding implications of scientific precision or universal accuracy for every individual.

The project followed our user-centered, iterative process—encompassing foundational research and discovery, qualitative research, and conceptual exploration informed by user feedback. This process guided the development of a visual language that brought consistency and clarity across Ancestry’s trait products, while layering illustrations over diverse, human-centered photography to deepen storytelling.

Additionally, the product’s visual system emphasized social engagement, education, and fun—combining scientific insight with approachable design, storytelling, and custom photography to deliver an engaging and memorable user experience. Informed by the completed live visual system and user analytics, the Traits product section achieved a 75% customer satisfaction rate and a 40% take rate among users, while weekly visits across all DNA products increased by 326%.

Note: The graphic above is a coalescence of artifacts—including research, design, illustration, iconography, and photography. Together this board shaped the overall visual language for Ancestry’s digital products.

 

  • Ancestry DNA
    Biotechnology & Information Services

  • Visual Design System

  • + Concept Development
    + Illustrative Storytelling
    + Product Research
    + Qualitative Research
    + Sketching & Ideation
    + Visual Identity System

The Highlands

Client Project
January 2018

__
The Highlands
I illustrated a simple representation of the Highlands for owners Boon & Caro Sheridan. The architectural style of the church is a Victorian Gothic Revival, constructed in 1885, which now serves as their residence.

  • + Architectural Illustration

  • + Illustration

Dutch Mafia Display Typeface

Creative Musing
January 2014

__
Dutch Mafia Display Typeface
A self-initiated project born from my childhood experiences growing up in a Dutch immigrant family.

The ornamental artifacts found in Dutch culture were the base that inspired the creation of this display font. Everything from fancy accouterments—including Delft pottery, wooden shoes, and doilies—to the unique architecture, cultural dress, traditions, and folk tales all defined the font. Though the style is simple in form, it conveys the unique and playful cultural background of Dutch society. In collaboration with Kurt Devlaeminck.

  • Dutch Mafia display typeface is available for purchase, email me for licensing and cost.

  • Communication Arts, Typography Award, 2014. Featured on Typography Served and AIGA member galleries.