The current stellar icon set has room for improvement. The icons use a fill style that draws a lot of visual attention, and the rounded corners aren't the best fit for a dense and technical application. In addition, many of the icons aren't pixel fit, creating blurry icons at small sizes due to anti-aliasing.
The current stellar icon set is using 16x16px icons, making it difficult to center things that are pixel fit. Radix has a crispy set of icons that fit most of our use cases. https://www.radix-ui.com/icons
Lots of the icons we use in aerie are already present in the Radix Icon set, and I've re-created our custom icons in this style, ensuring everything is pixel fit and legible at small sizes. Would be great to include these in the UI refactor.
Here's the icon set applied to the timeline toolbar. When we use a toolbar ribbon like this, we should also have no gaps between the hit target and edge of the container. This makes the clickable area a much more accessible 40px vs 24px as it is now. Still a bit of design iteration on how to handle the different states (on / off / keyboard toggle).
The current stellar icon set has room for improvement. The icons use a fill style that draws a lot of visual attention, and the rounded corners aren't the best fit for a dense and technical application. In addition, many of the icons aren't pixel fit, creating blurry icons at small sizes due to anti-aliasing.
The current stellar icon set is using 16x16px icons, making it difficult to center things that are pixel fit. Radix has a crispy set of icons that fit most of our use cases. https://www.radix-ui.com/icons
Lots of the icons we use in aerie are already present in the Radix Icon set, and I've re-created our custom icons in this style, ensuring everything is pixel fit and legible at small sizes. Would be great to include these in the UI refactor.
Here's the icon set applied to the timeline toolbar. When we use a toolbar ribbon like this, we should also have no gaps between the hit target and edge of the container. This makes the clickable area a much more accessible 40px vs 24px as it is now. Still a bit of design iteration on how to handle the different states (on / off / keyboard toggle).
All radix icons:
This is currently in a working branch of stellar, but icons should be cleaned up enough to be added: https://www.figma.com/file/ry4MSmDg1HthhvihgkDUYk/Radix-icons-test?type=design&node-id=11751-74&mode=design&t=IUckNNlfZVt3kLJW-4