GitLab SVGs

Illustration, Icon Design

Intro

GitLab SVGs is an open source projects, and you can use the illustrations and icons we created for free. You can preview all of the illustrations and icons on the online viewer.

I was one of the maintainers who take care of GitLab SVGs. I defined the visual style of illustrations and icons used on GitLab.com so that the brand impression would be emphasized.

Icon System

GitLab icons

Why we create our own icon system

GitLab was using Font Awesome for the products at the early stage. However, we sometimes were not able to find an adequate icon in Font Awesome for a specific case. We had to create the icons ourselves. It caused inconsistent visual language on GitLab.com.

To unify visual language, we decided to create our own icon system.

Outcome

We have a consistent icon set for system notes on Issue and Merge Request pages now.

Icons for system notes.

We have the icons for the uniqe cases in GitLab's contextual navigation bar.

The contextual navigation bar.

Illustrations

Why we implement illustrations

We would like to improve the onboarding experience in those scenarios:

Outcome

The new welcome page helps users start their journey on GitLab.com.

Friendly illustration and useful copy improve onboarding experience of Geo for the new users 🎨

Showing the error 404 page with an playful illustration would optimize the experience.

Great empty state would improve the experience when there is nothing to show.

Related Links

If you are interested in knowing more details about GitLab SVGs, illustrations, and icons, the links below could provide you more context:

GitLab SVGs and document

Illustrations

Icons

Who Else was Involved in the Project

UX Design Team, Product Manager, Frontend Developer

More Projects