Developers and designers use a variety of techniques to create site icons that change on hover or use, often by drawing different icon states in sprite sheets. These techniques are labor-intensive, and make later design changes difficult. More advanced techniques, such as transitioning changes in SVG icons via CSS, are an improvement, but still must be written on a per-icon basis.
Ideally, we would create icons just once, in their final state, and use CSS to present them in an “inactive” state, switching to “active” with a single declaration. With CSS blend modes and filters, you can do just that.
view source
