Currently, we have two versions of a filled checkmark icon: success and check circle. Both can be used invariably, and basically carry the same semantics, however success has a square background area, check circle has a round one:
success – to be removed:
use check circle instead:
We're seeing both in use, sometimes on the same view and in close proximity to each other, laying a cognitive load on the user to process how these mean the same but are not. Also, success with its square background area evokes associations with a checkbox ui element, adding more potential for confusion.
In order to remedy this situation, we have decided to sundown success, and replace it with check circle wherever it is being used.
In order to achieve this, we need to:
- remove the import:
import Success from "@material-design-icons/svg/filled/check_box.svg"
- keep the
success name and allow further using it, but return check circle instead
- test the fallback solution
- update the
success Icon to describe the fallback solution
Currently, we have two versions of a filled checkmark icon:
successandcheck circle. Both can be used invariably, and basically carry the same semantics, howeversuccesshas a square background area,check circlehas a round one:success– to be removed:use
check circleinstead:We're seeing both in use, sometimes on the same view and in close proximity to each other, laying a cognitive load on the user to process how these mean the same but are not. Also,
successwith its square background area evokes associations with a checkbox ui element, adding more potential for confusion.In order to remedy this situation, we have decided to sundown
success, and replace it withcheck circlewherever it is being used.In order to achieve this, we need to:
import Success from "@material-design-icons/svg/filled/check_box.svg"successname and allow further using it, but returncheck circleinsteadsuccessIcon to describe the fallback solution