これは覚えておくと良さそうですよ！ スタイルシートやJavaScriptを使ってマウスオーバーで画像を差し替えたりする操作は良くありますが、その発展版とも言えるのがAnimated SVG Iconsです。 SVGを使ったアイコンをクリックやマウスオーバー時にアニメーションしながら表示変更してくれるライブラリです。 画像だと分かりづらいですのが、例えばこちらがデモです。 矢印をクリックすると、 同様に時計をクリックすると、 試した動画はこちらです。

clock : { 
  url : 'svg/clock.svg',
  animation : [
    { 
      el : 'path:nth-child(2)', 
      animProperties : { 
        from : { val : '{"transform" : "r0 32 32"}' }, 
        to : { val : '{"transform" : "r630 32 32"}' } 
      } 
    },
    { 
      el : 'path:nth-child(3)', 
      animProperties : { 
        from : { val :'{"transform" : "r0 32 32"}' }, 
        to : { val : '{"transform" : "r80 32 32"}' }
      } 
    },
  ]
}

new svgIcon( element, configuration [, options] );

アニメーション制御時の指定はそれなりに書かないといけないようですが、色が変わったりするだけでなくアニメーションするアイコンを設置すればユーザインパクトは相当大きいのではないでしょうか。効果的に使いたいライブラリですね。

Animated SVG IconsはJavaScript製のソフトウェア（個人、商用と問わず利用可能。再配布禁止）です。

Animated SVG Icons: Using Snap.svg to animate SVG icons codrops/AnimatedSVGIcons