dequelabs
PROPOSAL: Consolidate icons into a single library and map old icons to new icons
The Problem
Today, our designs are using multiple icon libraries – this is creating inconsistencies between icons throughout our products where icons might be too thin, too thick, too small, too large, etc. We are mixing libraries of UXPin, Font Awesome, Material UI, and none of which were made to work together.
Proposal
Consolidating to use a singular icon set proposed by branding. Maybe using material icon set?
If so:
- Picking subset of icons (just what we need) and including them in Cauldron
Work to be done
- [ ] Identifying all the icons that are needed
- [ ] Naming strategies
- [ ] Adopt naming strategy from (insert icon library here)
- [ ] Identify current icons which map to new icon set
- [ ] If using material map old icons to new icons, e.g. "add-user" to "person add"
- [ ] Implement a code mod to automatically convert existing code base to use new icon names
- [ ] Pull icon library into Figma
- [ ] Remediate existing components that use icons (account for new spacing of icons)
- [ ] Update documentation (how to add a new icon)
- [ ] How to implement custom icons (follow same patterns as selected icon set, "ufa" would be custom)
When this gets initially implemented, we don't want to change the name yet but save that for a later breaking change. We may want to consider alias for the time being to support both names until we remove support for the old name.
Whatever we decide on, we should document the actual guidelines we expect icons to follow. Some examples below:
- https://primer.style/foundations/icons/design-guidelines
- https://m3.material.io/styles/icons/designing-icons
- https://developer.apple.com/design/human-interface-guidelines/icons
I don't think we need to be as verbose as what's above, but namely document the grid + padding we're using as well as general style to ensure new icons are consistent with the guidelines. If we're using font awesome, we could just specify that it must originate from there and list whatever guidelines we want to use.
Font Awesome has a "Setup with React" page https://docs.fontawesome.com/web/use-with/react/
