PROPOSAL: Consolidate icons into a single library and map old icons to new icons

bobbyomari commented 1 year ago

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

Let's consolidate the icons to use Font Awesome 6 Pro so we can take advantage of their full repository of icons that are all accessible and create consistency between our iconography library. I am suggesting Font Awesome because they have a very extensive and allow for a lot of parameters to be passed such as icon rotation, icon stacking, light/solid/thin/duotone icons, and much more. Additionally, if there are unique icons that are not part of FA6, we could upload custom icons as well as they have a method for that in their documentation. For more information about Font Awesome 6 visit: https://fontawesome.com/plans

Need to do

If we can confirm that it is OK to switch, then I can work on selecting icons that will map from old to new and include them in this ticket.

Links (SVGs can be downloaded from UXPin Design System)

Old icons: https://cauldron.dequelabs.com/components/Icon
New icons: https://app.uxpin.com/design-system/c933c74928e2195cc540/assets/213474

Icon Mapping

[ ] add-user -> user-plus-solid
[ ] arrow-circle-down -> circle-arrow-down-solid
[ ] arrow-circle-left -> circle-arrow-left-solid
[ ] arrow-circle-right -> circle-arrow-right-solid
[ ] arrow-circle-up -> circle-arrow-up-solid
[ ] arrow-down -> arrow-down-solid
[ ] arrow-left -> arrow-left-solid
[ ] arrow-right -> arrow-right-solid
[ ] arrow-up -> arrow-up-solid
[ ] arrows-alt -> arrows-up-down-left-right-solid
[ ] bolt -> - bolt-lightning-solid
[ ] caution -> triangle-exclamation-solid
[ ] check -> check-solid
[ ] check-circle -> circle-check-solid
[ ] check-shield -> shield-check-solid
[ ] check-solid -> check-solid
[ ] checkbox-checked -> square-check-solid
[ ] checkbox-unchecked -> square-regular
[ ] chevron-double-down -> angles-down-solid
[ ] chevron-double-left -> angles-left-solid
[ ] chevron-double-right -> angles-right-solid
[ ] chevron-double-up -> angles-up-solid
[ ] chevron-down -> angle-down-solid
[ ] chevron-left -> angle-left-solid
[ ] chevron-right -> angle-right-solid
[ ] chevron-up -> angle-up-solid
[ ] clipboard -> clipboard-list-solid
[ ] close -> xmark-solid
[ ] code -> code-solid
[ ] copy -> copy-solid
[ ] download -> download-to-line-solid
[ ] dropper -> eye-dropper-solid
[ ] exchange -> right-left-solid
[ ] export-solid -> download-solid
[ ] external-link -> link-external-solid
[ ] eye -> eye-solid
[ ] filter -> bars-filter-solid
[ ] filter-solid -> bars-filter-solid
[ ] flag -> flag-solid
[ ] gears -> gears-solid
[ ] github -> github
[ ] grid -> grid-solid
[ ] hamburger-menu -> bars-solid
[ ] hashtag -> hashtag-solid
[ ] highlight -> expand-solid
[ ] info-circle -> circle-info-solid
[ ] info-circle-alt -> circle-info-regular
[ ] info-square -> message-exclamation-solid
[ ] kabob -> ellipsis-vertical-solid
[ ] link -> link-solid
[ ] linkedin -> linkedin-in
[ ] list -> list-solid
[ ] lock -> lock-solid
[ ] magnifying-glass -> magnifying-glass-solid
[ ] menu -> grip-lines-solid
[ ] minus -> minus-solid
[ ] new -> square-plus-solid
[ ] new-releases -> seal-exclamation-solid
[ ] no -> ban-solid
[ ] pencil -> pencil-solid
[ ] person-running -> person-running-solid
[ ] play -> play-solid
[ ] plus -> plus-solid
[ ] question-circle -> circle-question-solid
[ ] question-circle-alt -> circle-question-regular
[ ] radio-checked -> circle-dot-regular
[ ] radio-unchecked -> circle-regular
[ ] recycle -> rotate-solid
[ ] recycle-square -> repeat-solid
[ ] resend -> share-all-solid
[ ] robot -> robot-solid
[ ] run-again -> rotate-left-solid
[ ] save -> floppy-disk-solid
[ ] share -> share-solid
[ ] share-nodes -> share-nodes-solid
[ ] sort -> arrow-down-arrow-up-solid
[ ] sort-triangle -> sort-solid
[ ] star -> star-sharp-solid
[ ] sun -> expand-solid
[ ] sort-ascending -> sort-up-solid
[ ] sort-descending -> sort-down-solid
[ ] tag -> tag-solid
[ ] target -> bullseye-solid
[ ] trash -> trash-can-solid
[ ] triangle-down -> caret-down-solid
[ ] triangle-left -> caret-left-solid
[ ] triangle-right -> caret-right-solid
[ ] triangle-up -> caret-up-solid
[ ] upload -> upload-solid

New Icons

[ ] NEW starfighter-twin-ion-solid
[ ] NEW jedi-solid
[ ] NEW triangle-solid
[ ] NEW gear-solid
[ ] NEW square-minus-solid
[ ] NEW user-minus-solid
[ ] NEW star-sharp-light

scurker commented 1 year ago

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.

scurker commented 8 months ago

Whatever we decide on, we should document the actual guidelines we expect icons to follow. Some examples below:

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.

anastasialanz commented 1 week ago

Font Awesome has a "Setup with React" page https://docs.fontawesome.com/web/use-with/react/

dequelabs / cauldron