Icon visual updates - batch 5
Update icon styles to align with new docs and be more consistent as a set. For this effort we are not renaming or merging concepts.
You may not notice much of a difference in some icons, but under the hood they’ve been aligned to the pixel grid and points have been removed in the shapes, which will decrease file size relative to the icon.
There are several icons here that previously existed in the SVG Previewer, but not Sketch. This effort brings them into Sketch.
Many icons are now used for multiple concepts, for example, arrow-right
and long-arrow
. In some cases this is because icons have been named too specifically, while the metaphor is more general. In other cases I believe that it’s because icons exist in some places, but not others, so they’ve been duplicated without knowing. And lastly, in some cases it just makes sense to simplify the library and allow context in the product to do its job.
Before | After | Notes | |
---|---|---|---|
collapse |
|||
scroll_down |
|||
scroll_up |
|||
search |
|||
drag (new #483 (closed)) |
- | ||
drag-horizontal (new #483 (closed)) |
- | ||
drag-vertical (new #483 (closed)) |
- | ||
push-rules |
Using the commit icon in a vertical state and including some lines to infer rules. |
||
remove-all |
Current is a bit tough to discern, I think this can be simplified. The action is to remove, regardless of what is being removed. | ||
bold |
Based on our Menlo font now, which is used in the editor. Breaking the rules on this one so it actually feels bold. | ||
code |
This is taller now to better balance with the other icons it’s typically used with. | ||
italic |
Based on our Menlo font now, which is used in the editor. Ironically, this looks more bold than bold in current state. | ||
link |
|||
unlink |
link and unlink now share the same base shape! |
||
list-bulleted |
|||
list-numbered |
|||
list-task (new) |
- | Current state uses the task-done icon, but it makes sense to better relate this to the other types of lists. |
|
quote |
Based on our Source Sans font | ||
screen-full |
Same icon as expand . |
||
screen-normal |
Same icon as compress . |
||
soft-unwrap |
|||
soft-wrap |
|||
task-done |
Same icon as todo-done . |
||
file-tree |
|||
messages |
This is used for “broadcast” messages, and since we use the bullhorn icon within those it makes sense to do so here. |
||
pencil-square |
|||
star |
Making this less cartoony. | ||
star-o |
Making this less cartoony. | ||
time-out |
|||
angle-up |
|||
angle-right |
|||
angle-down |
|||
angle-left |
|||
arrow-up |
Same icon as chevron-up . |
||
arrow-down |
Same icon as chevron-down . |
||
long-arrow |
Same icon as arrow-right . |
||
ellipsis-h |
|||
ellipsis-v |
Since the editor will be impacted more as a unit, here’s what it will look like. Note that the list-task
will be swapped in another issue since it requires code changes.
Editor | |
---|---|
Before | |
After |
/cc @gitlab-com/gitlab-ux @luke
/cc @phikai for the image-comment-
changes that help this feel more like a comment marker.