Abstract File Icons

With support for Adobe XD coming in the next couple of weeks, it was time to take another look at our file icon system.

Some challenges:

- Differentiate between a regular file and a library file
- Shouldn't require the user to "read" the icons to know which file format it is, a glance should be enough
- Proper contrast
- Work across different sizes
- Work on background colors ranging from white to nearly black
- A system we can re-use as we add more file formats in the future

How did we end up with this set? (see attached image)

(1) Icons we used for the first ~3 years after launching Abstract.
(2) Something we tested on our web app for a couple of weeks. The idea was right (the idea that bricks are library files), but it was impossible to differentiate them at smaller sizes.
(3) After dozens of explorations, we settled on this lovely set that looks a lot flatter compared to where we started, and really leaned into using a tool's key colors for the library icons.