Outside Icon Contributions - Grids Available?

[microsoft]

Outside Icon Contributions - Grids Available?

[jasoncuster]

Good news! We have an updated the Fluent System Icon file in Figma to include guidelines. Take a look and please add any issues with things that aren't clear or need some more definition.

https://www.figma.com/community/file/836835755999342788/Microsoft-Fluent-System-Icons

[jasoncuster]

Thanks for the questions @mdtauk - we're still working out the process for building the icons in an open source way. We have a small collection that includes the gridlines, key line and common shapes, but been adding guidance as things have come up so should have a nice amount of detail soon. As for timing around release, we haven't quite worked that out yet, but I will communicate it out as soon as we do.

[jasoncuster]

Hi @mdtauk - Sorry for the super delay, and thanks for your patience. With 32's the stroke is 2px (we're just now starting to add some of that size).

On top of that, a strokes width is .5px larger when it's a filled weight but has no shape to fill (checkmark for example). Note there are some icons that are filled weight, have filled shapes, but still thicken the strokes - those are bugs we're slowly working out of the system...haha.

Again, thanks for hanging in here. I know we're really slow at responding, but we'll get better with time (fingers crossed)...haha.

[jasoncuster]

Hey @mdtauk - the 2px padding scales to double for 48px icons. We typically update the 1px grid to 2px at that point so the icon scale is the same. Note that you should start at 20px icons - as we have something coming to help with other sizes very soon. ;)

[mdtauk]

Windows Terminal recently asked for some Icons for Horizontal and Vertical panes, that split a console view.

They are sticking with MDL2 icons for now, as they prepare to launch their Settings UI, and content menus - but I also suggested Fluent Design Icons they could move to. microsoft/terminal#6867

I was hoping to contribute these to this repo eventually

Split Horizontal and Split Vertical - 200% Scale - 24x24 Icons

So whatever helps generate a full set of sizes would be appreciated

[mdtauk]

Happy to add those to the upcoming sprint (merging Jan 29th). Do you have a figma file you can share?

https://www.figma.com/file/fiN6FE5Tk9dEegU1Z2XXY8/Split-Icons?node-id=0%3A1

[mdtauk]

And updated - I used the medium corner radius, as they hold up better at the smaller size I think
https://www.figma.com/file/fiN6FE5Tk9dEegU1Z2XXY8/Split-Icons

[jasoncuster]

I'll add 32 points for all - that's a newer edition based on the needs of products.And yeah, it's a fine line as a lot of those little bits are case by case but we will update the guidance cut out - as the 32 & 48 sizes do update the cut to account for scale (1.5 for 32, and 2 for 48).

And yeah, for the pixel perfection, it really isn't explicit, as we have tons of icons that don't adhere thus far, but as we get more MS products using them, it's clear we still cover a large spectrum between low and high density screens.

Thanks again for all the help and feedback!

[mdtauk]

Thanks for the questions @mdtauk - we're still working out the process for building the icons in an open source way. We have a small collection that includes the gridlines, key line and common shapes, but been adding guidance as things have come up so should have a nice amount of detail soon. As for timing around release, we haven't quite worked that out yet, but I will communicate it out as soon as we do.

Thank you for being so open with the process. I have been looking at the icons, and trying to understand the relationships between the various sizing.

• 12x12, 16x16, and 20x20 | 1px stroke
• 24x24 and 28x28 | 1.5px stroke
• 48x48 | 2.5px stroke

I haven't found a 32 x 32 icon yet and some icons like the clock, have a slightly thicker circle stroke. Also the larger the icon, the more padding around it.

[yoshiask]

Are there any updates on this? I've been looking to contribute some icons (specifically 24px variants of some icons that don't have them), but I don't want to do it wrong and waste your time.

[mdtauk]

Can I just check, that 2px Live Area you mention. 20 x 20 within a 24 x 24 icon.

Is that 2px with every size, or does that value scale also?

---

Or am I reading it wrong - and you always design at 24x24 for all icon sizes, then scale the icon up or down after?

[jasoncuster]

Happy to add those to the upcoming sprint (merging Jan 29th). Do you have a figma file you can share?

[jasoncuster]

Hey @mdtauk - Sorry for the delay, I'm looking at your icons today and have one question about them. I'm wondering why you didn't make the rectangle the size of the keyline suggestion (ex - 24px icon has a keyline landscape rect with 2px padding on left & right and 4px padding on top and bottom). We've updated the community file to include those base shapes.

If you can get them updated by Thursday midday I can squeeze them into our merge on Friday. Otherwise, I'm happy to take a look next week for our next sprint. Thanks again!

[mdtauk]

@jasoncuster When I made them the figma didn't include them, and I felt I needed to emphasise the "split" element of the icon, but I will update them now, using the shapes that are available!

Is it ok for the split line to extend out of the 2px padding around? otherwise the split line will be the same height as the box
The rectangle gives me a space either side, so thats ok

[jasoncuster]

Hey @mdtauk - Beautiful! I've taken a look and they are ready to merge on Friday! Note there's a few tweaks I addressed: We don't currently do 40px sizes, so that one was removed. The second is something we're trying to do a better job of, and as you'll note with the icon set so far, not always done - centering a stroke vs pixel perfect.

How we balance that for the smaller sizes is push it to a pixel on one side, and make the shape slightly smaller to look centered. Note as a designer there really is no winning here...haha...as you either are not completely following the keylines or you're created an icon that can be blurry on low density screens, but something that's important to us.

🎉 Thank you again for the contribution to the library. And here's to many more!

[mdtauk]

Hey @mdtauk - Beautiful! I've taken a look and they are ready to merge on Friday! Note there's a few tweaks I addressed: We don't currently do 40px sizes, so that one was removed. The second is something we're trying to do a better job of, and as you'll note with the icon set so far, not always done - centering a stroke vs pixel perfect.

How we balance that for the smaller sizes is push it to a pixel on one side, and make the shape slightly smaller to look centered. Note as a designer there really is no winning here...haha...as you either are not completely following the keylines or you're created an icon that can be blurry on low density screens, but something that's important to us.

🎉 Thank you again for the contribution to the library. And here's to many more!

I am happy to contribute.

There is also a 32px size one there, despite 32 not being on the list of sizes - these I used a 2px stroke (2.5 filled) as they seem to be between the 1.5 and 2.5 thicknesses on the chart

I tried to stick to the 1px cut out specified, but it looks like the larger sizes are leaving more space.

Cut out - The shape should be 1px size (no matter the icon size) from the edge of the glyph. Consider the detail when plotting the cutout as there may need to be some slight cleanup to streamline.

Should this advice be updated, so cut outs should always be the thickness of the stroke, or is there logic behind when this is the case?

Pixel precise strokes are good, I'd have done that myself were I not trying to adhere to the precise guidelines.
I kept them centred so as not to imply any meaning in which side gets more space, but they look centred for the most part so that is fine.

[jasoncuster]

Hey @mdtauk Look at them beauties in the file!

Thanks again for the close eye and all the contributions.