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 collapse.svg Collapse.svg
scroll_down scroll_down.svg Scroll_down.svg
scroll_up scroll_up.svg Scroll_up.svg
search search.svg Search.svg
drag (new #483 (closed)) - Drag.svg
drag-horizontal (new #483 (closed)) - Darg_horzontal.svg
drag-vertical (new #483 (closed)) - Drag_vertical.svg
push-rules push-rules.svg Push_rules.svg Using the commit icon in a vertical state and including some lines to infer rules.
remove-all remove-all.svg Remove_all.svg 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 bold.svg Bold.svg Based on our Menlo font now, which is used in the editor. Breaking the rules on this one so it actually feels bold.
code code.svg Code.svg This is taller now to better balance with the other icons it’s typically used with.
italic italic.svg Italic.svg Based on our Menlo font now, which is used in the editor. Ironically, this looks more bold than bold in current state.
link link.svg Link.svg
unlink unlink.svg Unlink.svg link and unlink now share the same base shape!
list-bulleted list-bulleted.svg List_bulleted.svg
list-numbered list-numbered.svg List_numbered.svg
list-task (new) - List_tasks.svg Current state uses the task-done icon, but it makes sense to better relate this to the other types of lists.
quote quote.svg Quote.svg Based on our Source Sans font
screen-full screen-full.svg Screen_full.svg Same icon as expand.
screen-normal screen-normal.svg Screen_normal.svg Same icon as compress.
soft-unwrap soft-unwrap.svg Soft_unwrap.svg
soft-wrap soft-wrap.svg Soft_wrap.svg
task-done task-done.svg Task_done.svg Same icon as todo-done.
file-tree file-tree.svg File_tree.svg
messages messages.svg Messages.svg This is used for “broadcast” messages, and since we use the bullhorn icon within those it makes sense to do so here.
pencil-square pencil-square.svg Pencil_square.svg
star star.svg Star.svg Making this less cartoony.
star-o star-o.svg Star_o.svg Making this less cartoony.
time-out time-out.svg Time_out.svg
angle-up angle-up.svg Angle_up.svg
angle-right angle-right.svg Angle_right.svg
angle-down angle-down.svg Angle_down.svg
angle-left angle-left.svg Angle_left.svg
arrow-up arrow-up.svg Arrow_up.svg Same icon as chevron-up.
arrow-down arrow-down.svg Arrow_down.svg Same icon as chevron-down.
long-arrow long-arrow.svg Long_arrow.svg Same icon as arrow-right.
ellipsis-h ellipsis_h.svg Ellipsis_horizontal.svg
ellipsis-v ellipsis_v.svg Ellipsis_vertical.svg

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 Before
After After

/cc @gitlab-com/gitlab-ux @luke

/cc @phikai for the image-comment- changes that help this feel more like a comment marker.

Edited by Jeremy Elder