[Meta] Create Uniquely 'GitLab' Icons

Uniquely GitLab

One of our big UX goals is to define and distinguish our unique personality.

• When you look at any screen, you should know immediately that it is GitLab
• Our personality is strong and consistent across product and marketing experiences

Iconography is a powerful visual cue to the user and should reflect our particular sense of style.

Proposal

Create our own set of SVG icons that fit in with our branding, illustrative style, and independent spirit.

This is a large undertaking so we will need to determine the best way to roll this out in iterative steps (if possible).

Sub-issues

• New icons related to issues (#32959 (moved))
• System notes icons (#33503 (closed))
• Merge Request / Pipelines / Editor box icons (#33926 (moved))
• General icons (#33757 (moved))
• Contextual sidebar icons - Project / Admin area / User settings / Group(#34027 (closed))

Where to get SVGs

https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/hazel/gitlab-icons/svg

Links / references

Related Issue Issue 32807

mentioned in issue #32807 (closed)

I assigned this to you @hazelyang but let me know if you have too much on your plate.

For consistency I would love to get these all out in one release but @tauriedavis may have some suggestions on how to roll this out in smaller steps I worry about rolling our 'polish' efforts backwards by having a mix of different icons across the UI.

We currently have a mix of font awesome and our own so that's already happening. If we can do these all at once, that would be great :)

Otherwise, I liked @annabeldunstone's suggestion of looking into replacing the ones that are often referenced/used the most (ex. system notes).

@sarrahvesselov @tauriedavis Agree, we should release these all at once. Will do! Thanks!

mentioned in issue #14420 (moved)

mentioned in issue #30254 (moved)

Also, I think this issue is closely related to this one from @dimitrieh so I am linking it here.

Releasing them incrementally wouldn't be a big deal because, as @tauriedavis said, we already have a mix of custom ones and font awesome.

I will divide this issue into the smaller issues and then we can release them step by step.

mentioned in issue #32959 (moved)

changed the description

changed the description

mentioned in issue #21936 (closed)

mentioned in issue #33503 (closed)

changed the description

changed title from Create Uniquely 'GitLab' Icons to [Meta] Create Uniquely 'GitLab' Icons

mentioned in issue #33677 (moved)

mentioned in issue #29778 (closed)

mentioned in issue #33757 (moved)

changed the description

mentioned in issue #33926 (moved)

changed the description

marked the checklist item New icons related to issues (#32959 (moved)) as completed

marked the checklist item System notes icons (#33503 (closed)) as completed

marked the checklist item General icons (#33757 (moved)) as completed

changed the description

changed the description

marked the checklist item Merge Request / Pipelines icons (#33926 (moved)) as completed

changed the description

marked the checklist item Contextual sidebar icons (#34027 (closed)) as completed

changed the description

mentioned in commit gitlab-design@3aee2aa7

mentioned in commit gitlab-design@e2699269

I think I almost finished those icons. If you have any feedback or find some icons I am missing (hope not) , please let me know. Thanks!

changed the description

mentioned in commit gitlab-design@42ff1733

mentioned in commit gitlab-design@dc3e3918

mentioned in commit gitlab-design@873cd51f

mentioned in commit gitlab-design@260b8efd

mentioned in issue #24312 (closed)

You have done great work on these icons @hazelyang. I went through the sub-issues and made some comments. Once you think those are all good, change them to UX Ready and we can see about getting them scheduled

mentioned in issue gitlab-design#30

mentioned in commit gitlab-design@c069950f

marked this issue as related to gitlab-design#30

mentioned in commit gitlab-design@1650e6e7

marked the checklist item Contextual sidebar icons (#34027 (closed)) as incomplete

marked the checklist item Contextual sidebar icons (#34027 (closed)) as completed

changed the description

mentioned in commit gitlab-design@b29dfada

changed the description

added UX ready and removed UX labels

mentioned in commit gitlab-design@1b528050

mentioned in commit gitlab-design@09d5128e

mentioned in commit gitlab-design@11d42363

mentioned in commit gitlab-design@cb4dc75b

mentioned in commit gitlab-design@fadd7e17

mentioned in commit gitlab-design@2f010e67

mentioned in issue #36289

mentioned in commit gitlab-design@7f937d17

mentioned in commit gitlab-design@ed493ac7

changed the description

mentioned in commit gitlab-design@a9010931

mentioned in commit gitlab-design@8e008228

mentioned in commit gitlab-design@c7b2d70d

mentioned in commit gitlab-design@2659ac3e

mentioned in commit gitlab-design@82c31620

mentioned in commit gitlab-design@7663e86d

mentioned in commit gitlab-design@5439e0bd

changed milestone to %10.0

@timzallmann is working on implementing the new icons using an SVG Sprite. This will replace Font Awesome altogether.

mentioned in merge request !13963 (closed)

marked this issue as related to #30254 (moved)

mentioned in issue #38055 (closed)

marked this issue as related to #38085 (closed)

changed the description

mentioned in merge request !14396 (merged)

closed via merge request !14396 (merged)

mentioned in commit 35665880

mentioned in commit d0fbdaed

One thing we are missing is all the icons in the design library. @hazelyang Do you already have a separate issue to add them all? I've added a few that I've used in designs already so you should be able to just copy how they are set up (using a mask so the fill color can easily be changed). Let me know if you have any questions.

mentioned in issue #38597

mentioned in merge request !14577 (merged)

Do you already have a separate issue to add them all? I've added a few that I've used in designs already so you should be able to just copy how they are set up (using a mask so the fill color can easily be changed). Let me know if you have any questions.

Thanks @tauriedavis! I haven't added them all. I'll follow the way to add the rest of icons.

mentioned in issue gitlab#10133

mentioned in issue gitlab#10430

mentioned in issue gitlab#10470

mentioned in issue gitlab#10534

mentioned in merge request !14785