[NEW ICON]: WSL

[RushilJalal]

Skill Name

WSL

Why?

It's popular to run Linux on Windows.

Reference Image

Converted to SVG but couldn't remove the bg.

Code of Conduct Acknowledgment

• [X] I have read and agree to the Code of Conduct.

[LelouchFR]

@RushilJalal I've been trying to make the wsl logo from scratch, but I'm having some trouble when it scales... The beak has some problem and I'm still trying to get it to be perfect, but the icons should look something like that, what do you think ?

[RushilJalal]

@LelouchFR Looks great imo

Yeah, the beak is slightly different from the original but it's hardly noticeable. If possible, try adding a black border to both icons.

[LelouchFR]

@LelouchFR Looks great imo

Yeah, the beak is slightly different from the original but it's hardly noticeable. If possible, try adding a black border to both icons.

The thing with the beak is not that it's different on this scale, but it's that the beak (that I've done) is 2 circles that are group together and centered together the thing is that if you upscale or downscale the icon, the circle on the top (the lighter one) is not scaling correctly (it doesn't at all) and gets not centered anymore.

[RushilJalal]

Could you share the file with me? Or maybe a video? Also what is the need of upscaling or downscaling? Wouldn't the icons always remain the same size when used by the users?

[LelouchFR]

Could you share the file with me? Or maybe a video? Also what is the need of upscaling or downscaling? Wouldn't the icons always remain the same size when used by the users?

sure ! (normally if you copy paste the svg code in figma, it will output as an svg and not text):

dark:

<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#242938"/>
<path d="M46 100.5C46 54.9365 82.9365 18 128.5 18C174.063 18 211 54.9365 211 100.5V230.766C211 234.761 207.761 238 203.766 238H53.234C49.2388 238 46 234.761 46 230.766V100.5Z" fill="#0A5DA9"/>
<path d="M66.8423 134.947H190.737V151.158C190.737 185.37 163.002 213.105 128.79 213.105C94.5771 213.105 66.8423 185.37 66.8423 151.158V134.947Z" fill="#FFC700"/>
<path d="M66.8423 134.947H190.737V139.579C190.737 173.791 163.002 201.526 128.79 201.526C94.5771 201.526 66.8423 173.791 66.8423 139.579V134.947Z" fill="white"/>
<path d="M66.8423 93.2631C66.8423 77.9154 79.2841 65.4736 94.6318 65.4736C109.979 65.4736 122.421 77.9154 122.421 93.2631V134.947H66.8423V93.2631Z" fill="white"/>
<path d="M135.158 93.2631C135.158 77.9154 147.599 65.4736 162.947 65.4736C178.295 65.4736 190.737 77.9154 190.737 93.2631V134.947H135.158V93.2631Z" fill="white"/>
<circle cx="94.3422" cy="100.5" r="13.0263" fill="black"/>
<circle cx="162.658" cy="100.5" r="13.0263" fill="black"/>
<g clip-path="url(#clip0_658_51)">
<rect x="101" y="121.053" width="55" height="55" rx="27.5" fill="#C36209"/>
<circle cx="148.5" cy="168.553" r="47.5" fill="#C36209"/>
<circle cx="128.5" cy="-45.5" r="197.5" fill="#F2900C"/>
</g>
<defs>
<clipPath id="clip0_658_51">
<rect x="101" y="121.053" width="55" height="55" rx="27.5" fill="white"/>
</clipPath>
</defs>
</svg>

light:

<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M196 0H60C26.8629 0 0 26.8629 0 60V196C0 229.137 26.8629 256 60 256H196C229.137 256 256 229.137 256 196V60C256 26.8629 229.137 0 196 0Z" fill="#F4F2ED"/>
<path d="M46 100.5C46 54.9365 82.9365 18 128.5 18C174.063 18 211 54.9365 211 100.5V230.766C211 234.761 207.761 238 203.766 238H53.234C49.2388 238 46 234.761 46 230.766V100.5Z" fill="#0A5DA9"/>
<path d="M66.8423 134.947H190.737V151.158C190.737 185.37 163.002 213.105 128.79 213.105C94.5771 213.105 66.8423 185.37 66.8423 151.158V134.947Z" fill="#FFC700"/>
<path d="M66.8423 134.947H190.737V139.579C190.737 173.791 163.002 201.526 128.79 201.526C94.5771 201.526 66.8423 173.791 66.8423 139.579V134.947Z" fill="white"/>
<path d="M66.8423 93.2631C66.8423 77.9154 79.2841 65.4736 94.6318 65.4736C109.979 65.4736 122.421 77.9154 122.421 93.2631V134.947H66.8423V93.2631Z" fill="white"/>
<path d="M135.158 93.2631C135.158 77.9154 147.599 65.4736 162.947 65.4736C178.295 65.4736 190.737 77.9154 190.737 93.2631V134.947H135.158V93.2631Z" fill="white"/>
<circle cx="94.3422" cy="100.5" r="13.0263" fill="black"/>
<circle cx="162.658" cy="100.5" r="13.0263" fill="black"/>
<g clip-path="url(#clip0_658_71)">
<rect x="101" y="121.053" width="55" height="55" rx="27.5" fill="#C36209"/>
<circle cx="148.5" cy="168.553" r="47.5" fill="#C36209"/>
<circle cx="128.5" cy="-45.5" r="197.5" fill="#F2900C"/>
</g>
<defs>
<clipPath id="clip0_658_71">
<rect x="101" y="121.053" width="55" height="55" rx="27.5" fill="white"/>
</clipPath>
</defs>
</svg>

Just the logo I've done:

<svg width="285" height="380" viewBox="0 0 285 380" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 142.5C0 63.7994 63.7994 0 142.5 0C221.201 0 285 63.7994 285 142.5V367.505C285 374.406 279.406 380 272.505 380H12.4952C5.59429 380 0 374.406 0 367.505V142.5Z" fill="#0A5DA9"/>
<path d="M36 202H250V230C250 289.094 202.094 337 143 337C83.9055 337 36 289.094 36 230V202Z" fill="#FFC700"/>
<path d="M36 202H250V210C250 269.094 202.094 317 143 317C83.9055 317 36 269.094 36 210V202Z" fill="white"/>
<path d="M36 130C36 103.49 57.4903 82 84 82C110.51 82 132 103.49 132 130V202H36V130Z" fill="white"/>
<path d="M154 130C154 103.49 175.49 82 202 82C228.51 82 250 103.49 250 130V202H154V130Z" fill="white"/>
<circle cx="83.5" cy="142.5" r="22.5" fill="black"/>
<circle cx="201.5" cy="142.5" r="22.5" fill="black"/>
<g clip-path="url(#clip0_658_22)">
<rect x="95" y="178" width="95" height="95" rx="47.5" fill="#C36209"/>
<circle cx="142.5" cy="225.5" r="47.5" fill="#C36209"/>
<circle cx="142.5" cy="34.5" r="197.5" fill="#F2900C"/>
</g>
<defs>
<clipPath id="clip0_658_22">
<rect x="95" y="178" width="95" height="95" rx="47.5" fill="white"/>
</clipPath>
</defs>
</svg>

[RushilJalal]

These look perfect! I fail to understand the issue here.

[LelouchFR]

These look perfect! I fail to understand the issue here.

as said before, the size there is 256x256 (as every icon), when rendered using the api, it gets downscaled to 48x48; the one circle in the beak get then the whole beak. if in the future, we get the posibility to upscale or downscale the icons, there will be a problem (even if there is already the problem right now with this icon).

[RushilJalal]

Is downscaling to 48x48 different from dragging the SVG and making it 48x48? Because when I tried reducing the size of the SVG in Figma, there were no issues.

[LelouchFR]

Is downscaling to 48x48 different from dragging the SVG and making it 48x48? Because when I tried reducing the size of the SVG in Figma, there were no issues.

wait huh lol, just had to export reimport and it works fine now ! thanks !