[Icon]: Update icon Exit

[kjellr]

Why are you proposing this update?

👋 I'd like to propose updating the Exit icon to have more of a squared-off shape. There's admittedly some subjectivity involved in this proposal, but a couple notes:

• The current icon feels squished visually, and also suggests a mobile phone, which seems odd here.
• The proposed shape aligns more with our External Icon.

There's definitely room for refinement in the proposal, but I think it's a step in the right direction. The proposed icon is currently implemented as a custom icon in the Online Store Editor, and we'd like to bring things more in line with Polaris.

cc @vernalkick @jasonsantamaria @heyjoethomas

Icon name

Exit

Icon Figma link

https://www.figma.com/design/KXKb8CcuhfYjFWEiJFMHK7/Polaris-Exit-Icon?node-id=0-1

Icon SVG code

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.75 3C7.50736 3 6.5 4.00736 6.5 5.25C6.5 5.66421 6.83579 6 7.25 6C7.66421 6 8 5.66421 8 5.25C8 4.83579 8.33579 4.5 8.75 4.5H15.75C16.1642 4.5 16.5 4.83579 16.5 5.25V14.75C16.5 15.1642 16.1642 15.5 15.75 15.5H8.75C8.33579 15.5 8 15.1642 8 14.75C8 14.3358 7.66421 14 7.25 14C6.83579 14 6.5 14.3358 6.5 14.75C6.5 15.9926 7.50736 17 8.75 17H15.75C16.9926 17 18 15.9926 18 14.75V5.25C18 4.00736 16.9926 3 15.75 3H8.75Z" fill="#4A4A4A"/>
<path d="M10.25 10.75C10.6642 10.75 11 10.4142 11 10C11 9.58579 10.6642 9.25 10.25 9.25L4.56066 9.25L5.53033 8.28033C5.82322 7.98744 5.82322 7.51256 5.53033 7.21967C5.23744 6.92678 4.76256 6.92678 4.46967 7.21967L2.21967 9.46967C2.07902 9.61032 2 9.80109 2 10C2 10.1989 2.07902 10.3897 2.21967 10.5303L4.46967 12.7803C4.76256 13.0732 5.23744 13.0732 5.53033 12.7803C5.82322 12.4874 5.82322 12.0126 5.53033 11.7197L4.56066 10.75H10.25Z" fill="#4A4A4A"/>
</svg>

Are there any other important details?

No response

[heyjoethomas]

This biggest issue with the current proposal is it doesn't follow the basic guidelines of our icon library. It is much to big and breaks way outside the defined keylines. We could look at making it more square but would need to still follow our guidelines.

We also would need a design that also works for the Enter icon as these two need to mirror eachother.

[kjellr]

For sure. I saw you added a few explorations in there (thank you! 🙌). I tried a few more as well. 3 & 4 are feeling decent to me, I'm curious what you think.

Figma

[heyjoethomas]

The thing 4 misses for me is that feeling that the arrow is entering or leaving the box. 2 and 3 do that better imo.

[kjellr]

Yeah, I think that's fair. Do you have a preference between 2 & 3?

3 feels a little readable at its default size to me.

[heyjoethomas]

Yeah i'm fine with either so if you all have a preference we can go with that.

[kjellr]

Ok great, thank you! I chatted with @jasonsantamaria and we both feel good about 3. What are our next steps in that case?

Here's the code for those:

Enter

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M4.25 14.25a1.5 1.5 0 0 0 1.5 1.5h8.5a1.5 1.5 0 0 0 1.5-1.5v-8.5a1.5 1.5 0 0 0-1.5-1.5h-8.5a1.5 1.5 0 0 0-1.5 1.5"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.25 10 9 12.25M11.25 10 9 7.75M11.25 10h-6"/></svg>

Exit

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m5 10 2.25 2.25M5 10l2.25-2.25M5 10h6"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M4.25 14.25a1.5 1.5 0 0 0 1.5 1.5h8.5a1.5 1.5 0 0 0 1.5-1.5v-8.5a1.5 1.5 0 0 0-1.5-1.5h-8.5a1.5 1.5 0 0 0-1.5 1.5"/></svg>

[heyjoethomas]

First we can get it updated in Figma. Then once the icon migration is done, we can update the repo to get this into prod. That migration project is just moving the the release phase so it shouldn't be very long before we can make that happen.