General icons
Icons list
| Current | New | |
|---|---|---|
| Public |  |
 |
| Internal |  |
 |
| Private |  |
 |
| Fork |  |
 |
| Star(border) |  |
 |
| Star |  |
 |
| Download / Clone |  |
 |
| Question |  |
 
|
| Document |  |
 |
| Document(Code) |  |
|
| Document(Image) |  |
 |
| Folder |  |
 |
| Warning |  |
 |
| Play |  |
 |
| Refresh |  |
 |
| History |  |
 |
| Search |  |
 |
| Plus |  |
 |
| Resolve all discussions in new issue |  |
 |
| Jump to next unresolved discussion |  |
 |
| Filter |  |
 |
| Settings |  |
 |
| Leave |  |
 |
| Thumb up |  |
 |
| Thumb down |  |
 |
| Disussion |  |
 |
| Three dots |  |
|
| Admin |  |
 |
| *Pipelines(CI/CD) |  |
|
| Issues |  |
|
| Wiki |  |
|
| Work |  |
 |
| Location |  |
 |
| Unlock |  |
cc @sarrahvesselov @dimitrieh @annabeldunstone
Where to get SVGs
https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/hazel/gitlab-icons/svg
Related links
Sub-issue from gitlab-foss#32894 (closed)
Activity
mentioned in issue gitlab-foss#32894 (closed)
I like where these are going @hazelyang
@hazelyang good job, these are looking pretty good
- Internal/Private: we have a good opportunity here to think if these are the best symbols to represent the meaning of “internal” and “private” projects. Can we do better than a “shield” and a “lock”? For “internal”, maybe inspired by the term “in-house”, using a building shape?
- Internal: do we really need that 1px inside padding? Couldn't it be simpler without it, while still keeping the meaning intact?
- Document(s): the border radius is larger than on other similar icons, like “Folder” or “Wiki” — why is that?
- Question: can we also have a filled version?
- Warning/Play/Work/Folder/Location: what's your rationale for having some icons filled and others outlined?
- Pipelines: what is this supposed to represent? Similar to a clock? Maybe it could be more representative as a piping system (see pipeline icons)?
- Pipelines vs Issues: I personally feel like these are not that different, which doesn't help with recognition. People may feel like the pipelines icon has something to do with issues? Maybe not that important, but I thought it was worth mentioning
- Wiki: the bookmark shape is a bit too close to the outline, which can make this icon difficult to understand in smaller sizes or even lighter colors
- Dropdown arrow: didn't we decide to use chevrons instead of triangles for dropdowns?
- Three dots: seems extremely “light” to me and doesn't stand out as much as the other icons. Of course it depends on how it's used — do you have an current example of what this would replace?
- Refresh/History: the arrows are much harder to understand on these icons that on other icons with arrows, like “Leave” or “Download/Clone”
- Resolve all discussions in new issue: it looks like the exclamation mark is not centered
- Admin: the tiny “hole” at the end of the wrench is almost invisible. I'm not sure it needs this “hole”, but if you think it does, using the circles seen in “Fork” could be a better choice
- Download/Discussion: I worry about the very small spacing between different shapes in these icons. It would work better if they had the same space as seen in the “Resolve all discussions in new issue” icon, between the “plus” and the “circle”. There are some icons where spacing between shapes can be very small because there's no risk of losing meaning if the human eye “joins” the shapes and sees only one single shape, like in the “Thumb up” icon. But there are other icons, like these ones, where this very small spacing can render an icon useless.
Let me know if you'd like some examples of what could work for certain icons.
mentioned in issue gitlab-foss#34027 (closed)
@pedroms Thanks for the comments!
Internal/Private: we have a good opportunity here to think if these are the best symbols to represent the meaning of “internal” and “private” projects. Can we do better than a “shield” and a “lock”? For “internal”, maybe inspired by the term “in-house”, using a building shape?
I am ok with the "Shield", but I am also open to try the new icon -->
- Document(s): the border radius is larger than on other similar icons, like “Folder” or “Wiki” — why is that?
The document icons radius is 3px as "Folder" radius. Only the "Wiki" radius is 2px. That's my neglect. Will update it later.
Question: can we also have a filled version?
I think they looks heavier than other icons...
Why do you think we need the filled version? Warning/Play/Work/Folder/Location: what's your rationale for having some icons filled and others outlined?
My consideration is the visual weight. Most of the icons are outlined, but because some of the icons look too tight with outlined style, I modified them to filled version.
Pipelines: what is this supposed to represent? Similar to a clock? Maybe it could be more representative as a piping system (see pipeline icons)?
It's from the things like this. How about the new one?
Pipelines vs Issues: I personally feel like these are not that different, which doesn't help with recognition. People may feel like the pipelines icon has something to do with issues? Maybe not that important, but I thought it was worth mentioning
The new pipeline icon might help people differ them.
Three dots: seems extremely “light” to me and doesn't stand out as much as the other icons. Of course it depends on how it's used — do you have an current example of what this would replace?
Agree. Will updated it.
Wiki: the bookmark shape is a bit too close to the outline, which can make this icon difficult to understand in smaller sizes or even lighter colors
Good suggestion! Thanks!
Dropdown arrow: didn't we decide to use chevrons instead of triangles for dropdowns?
I think we have 2 types?
Refresh/History: the arrows are much harder to understand on these icons that on other icons with arrows, like “Leave” or “Download/Clone”
Makes sense. We can increase the arrow size in Refresh icon. But I don't think that works for History icon as it will feel too tight if the arrow is large.
Resolve all discussions in new issue: it looks like the exclamation mark is not centered
It's centered.
Admin: the tiny “hole” at the end of the wrench is almost invisible. I'm not sure it needs this “hole”, but if you think it does, using the circles seen in “Fork” could be a better choice
We can remove the "hole".
Download/Discussion: I worry about the very small spacing between different shapes in these icons. It would work better if they had the same space as seen in the “Resolve all discussions in new issue” icon, between the “plus” and the “circle”. There are some icons where spacing between shapes can be very small because there's no risk of losing meaning if the human eye “joins” the shapes and sees only one single shape, like in the “Thumb up” icon. But there are other icons, like these ones, where this very small spacing can render an icon useless.
I am not sure if we need to increase the space. The space still works in 8 * 8px. I'll update Download icon first and try to increase the space in other icons later.
Edited by Hazel YangInternal/Private: we have a good opportunity here to think if these are the best symbols to represent the meaning of “internal” and “private” projects. Can we do better than a “shield” and a “lock”? For “internal”, maybe inspired by the term “in-house”, using a building shape?
I am ok with the "Shield", but I am also open to try the new icon -->
The building icon is just confusing to me. I think the leap from internal to in-house might be too far. I also agree with @pedroms that the shield is not great either (I think the lock is fine). Internal relates to those in a group having access. Internal makes me think more of teams, like this: https://thenounproject.com/search/?q=team.
Edited by Sarrah Vesselov@sarrahvesselov @pedroms Thanks for the idea! New icon for internal -->
@hazelyang thanks for your comment and for updating the icons. Looking great!
- Question: For the filled version, I meant the “Question” icon, not the document icon
- Internal: @sarrahvesselov actually internal projects are visible to all logged-in users, no matter if they're in a group (docs). The proposed icon is the same as “Members”, which actually fits Private projects better (where only members have access/visibility), but I don't think we should change the Private icon. I'm not sure which metaphor is best for Internal, maybe “authenticated”? Lacking a better metaphor, probably it's best to stick with the “shield”.
- Pipeline: Humm…, I guess the “gauge” icon doesn't speak “continuous integration” to me. It hints at “dashboard” or “speed”, but not CI or CD. Maybe looking into those terms? Continuous or Continuous Integration?
- Dropdown arrow: we're now using only the chevrons
- Three dots/Refresh/Wiki: much better
Oh, and thanks for explaining the rationale for having some icons filled and others outlined (I'm just curious!)
- Question: For the filled version, I meant the “Question” icon, not the document icon
The proposed icon is the same as “Members”, which actually fits Private projects better (where only members have access/visibility), but I don't think we should change the Private icon. I'm not sure which metaphor is best for Internal, maybe “authenticated”? Lacking a better metaphor, probably it's best to stick with the “shield”.
We definitely can't use the same icon that "Members" is using. I am ok with keeping the shield.
Question: For the filled version, I meant the “Question” icon, not the document icon
Internal: @sarrahvesselov actually internal projects are visible to all logged-in users, no matter if they're in a group (docs). The proposed icon is the same as “Members”, which actually fits Private projects better (where only members have access/visibility), but I don't think we should change the Private icon. I'm not sure which metaphor is best for Internal, maybe “authenticated”? Lacking a better metaphor, probably it's best to stick with the “shield”.
Will update it in the description.
Pipeline: Humm…, I guess the “gauge” icon doesn't speak “continuous integration” to me. It hints at “dashboard” or “speed”, but not CI or CD. Maybe looking into those terms? Continuous or Continuous Integration?
I don't have a better idea for this icon currently. Will update it later if we have another good icon for it.
Dropdown arrow: we're now using only the chevrons
Thanks! Will remove the arrow.
changed milestone to %10.2
added Discussion in GitLab FOSS label
added Platform in GitLab FOSS label
removed Discussion in GitLab FOSS label
marked this issue as related to gitlab-foss#38499
assigned to @jramsay
changed milestone to %10.2
moved from gitlab-foss#33757 (moved)
