Hello Abraham!
I am dealing with this question currently.
I feel like Figma is stellar when dealing with outlined icons. I’ve always worked with outlined, flattened icons (24 and 16 since I need them in both sizes). However… there is a specific dev in the team who wants pixel perfect icons in both sizes so he demands outlined icons for the open source project.
However… as you said, smaller icons can get hard to read if they’re reduced with the same line weight.
What I’ve been doing is:
- Outlined icons mostly, in two sizes: 16 and 24.
Pros: Super easy to manage on Figma.
Cons: some of them have weird lines when outlined + less “flexible” if their weight/design needs to be changed. According to the dev who required them: they’re not crisp enough since they might not sit perfectly on the grid. - Stroked icons are “crispier”, but are a PAIN to manage on Figma: since it is not a single vector, overwriting the colour values is very hard since some parts of the icon will fill with colour when it shouldn’t.
So… I still haven’t find my answer lol. I guess that “it depends”?
If you want to modify/adapt stroke is gold. If you’re sure you’re ready to roll with them and you will not change them, then flatten them.
I hope I could help in some way.