まず初めに、この記事は 動くアイコンを作ろうぜ！ って主旨ではありませんw
Webサイトにおけるアイコンやピクトグラムって、パッと見で情報を補足してくれるだけではなく、時にはソレがあるだけで画面遷移をスムーズにしてくれたりする、とても重要なアイテムだと思います。
たとえば『家はトップへのリンク』『虫眼鏡は検索』『横向きの鳥はTwitter』だなって分かりますし、『矢印』があれば向きによって画面遷移だったり、画面内の移動だったり、アコーディオン開閉だったりと、一般的に認知されている・もしくは直感的に理解できるアイコンは数多くあると思います。
Web制作者目線でアイコン・ピクトグラム表示となると、パッと思い浮かぶ方法は下記ぐらいかなって思いますが、どれも一長一短ありますし、案件の条件によっては NG だったりする場合もあります。
比較的クラシカルな手法(あくまでも個人的見解)ですが、デザイン性は使用色を含めて無限ですし、サーバの仕様などに引っかかることもないですし安定感はあります。
ただし表示場所によって大きさを変えたり、色を変えたりする場合は、その全数分の画像を作成する必要があります。
まず手軽！可変フォントサイズにも対応！THE・日本の文化！
ただしデバイスによって見た目が代わりますし、そもそも charset が UTF-8 でないと確実にアウトです。
洗練されていて見慣れたものも多いので認知度的にも良いですし、画像に比べて実装がラクで、ファイルサイズ的にも表示速度的にも優秀です！
ただし単色ですし、決まったものの中から選ぶという縛り（自身で作成したものを登録出来るサービスもあります）がありますし、通信環境などによる FOUT問題 もありますし、条件によってはそもそも使用できない場合すらあります。(サーバ仕様などによる外部CDN の使用禁止や、特定以外のファイル設置禁止など)
マリオさんメッチャ走っている人のアイコン
あくまでも 動くアイコン の一例であり、某有名なお髭が似合う空中に浮かぶコインを取りまくっているキャラクターとは一切関係ございません…念のためw
本題とはズレますがアイコン以外にも、ちょっとしたワンポイントなどでも使えたりしますね。
まぁアイコンを動かす必要性なんてそんなにないかもですが、『動かすことも出来るんだぞっ』程度に見ていただければ。
まず アイコンを動かそう と思えば、パッと思い浮かぶ方法は下記ぐらいかなって思います。
いずれにしても根本的には画像対応ですね…そこで今回の私からのご提案ですが
画像も svg も使用せずに css で書いてしまおう！ ですw
当然、charset や、サーバの仕様などに左右されることもなく、SEO やクロスブラウジングも気にすることもなく『単色しか使えない』『決められた中から選ぶ』などの縛りもないので、デザイン性を損なうこともありません。
そもそも css で書いているので、表示サイズを可変させることも出来ますし、モジュール化しておけば汎用性もジャンジャンバリバリです！
ソースを覗いていただければ分かる通り…
『THE・チカラワザの極み』です、以上！w
