Data Visualization Icon Designs
Designed a custom set of icons for AmeriCorps' internal data visualization guide in collaboration with the Office of the Chief Executive Officer at the agency.
Published: 5/20/2025
Designed a custom set of icons for AmeriCorps' internal data visualization guide in collaboration with the Office of the Chief Executive Officer at the agency.
A Data Analyst from the Office of the Chief Executive Officer (CEO) reached out for help on creating a custom set of icons for the updated internal Data Visualization guide.
Although graphic design is not a core function of UX, I worked the project as I was able to create simple icons in Figma, but more importantly I could focus on the readability of the icons and to ensure accessibility standards were met for my team members across the agency.
The icons needed to have alignment with agency branding and consistency with the other assets being used. The AmeriCorps' brand style guide, existing branding content, and digital touchpoints with the agency were all reviewed and notes were compiled based on the observations and patterns seen.
These icons would be viewed by many different people across the agency, so I had to ensure that the icons would be readable and had appropriate contrast levels for accessibility standards.
The overall icon color palette was based on the brand colors, but tweaked and tested for readability across a multitude of possible color-blindness scenarios. After ideating on possible options, one combination stood out to be the best performer.
Each icon was manually colored based on this palette for maximum contrast and readability, content recognition, and consistency.
Using the new palette that was modified for contrast and accessibility, the icons were designed, colored, and refined.
A label of the name of what the icon represented was placed underneath each icon to provide additional clarity. Icons alone can be misinterpreted, so having a label of the name of the icon content helped readers of the guide have confidence that what they were looking at was in fact the right thing.
The decision to make the icons the way they are is due to researching and analyzing how current digital brand asset details were being used. For example, it was noticed that the brand used rounded rectangles for container shapes like cards, while maintaining the default (sharp) corners for detail elements.
To maintain consistency, that observation was mirrored in the icon designs with a rounded rectantagle containers and sharp corners/edges for graph elements like the bars in a bar graph.
The hand-off deliverables were the icon library in the form of PNG and SVG filed, the accessibility color palette, respective hex codes, and a brief summary of how and why to use the palette were shared to the data visualization team in the CEO Office.
The UX Team provided these additional resources to ensure the data visualization team had a reference on hand - saving time by not waiting to email, message, or meet for any icon related questions.
The icons were received with praise and the data visualization team was able to use the assets with no issue. The guide was launched with positive feedback overall.