こんにちは。アウラスタッフの仁木です。

「icons8」でアニメーションつきのアイコンがフリーで配布されていたので試しに使ってみました。

Webで使用しやすいものがチョイスされています。
リンク先のページでは「18 Free Animated Icons」と書かれていますが、種類は60種類確認できます。
同じ見た目のアイコンもいくつかありますが、アニメーションが違うものです。

使い方は簡単でした

10数行の記述ですぐに使うことが出来ました。
下のCodepenの「Result」の表示結果画面でアイコンをクリックするとアニメーションが確認できます。

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”veXyYN” default_tab=”js,result” user=”toshitaka”]See the Pen <a href=’https://codepen.io/toshitaka/pen/veXyYN/’>veXyYN</a> by Toshitaka Niki (<a href=’https://codepen.io/toshitaka’>@toshitaka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

色も変えられる！

また、各アイコンはSVGなのでCSSで「stroke」プロパティと「fill」プロパティで色を変更することができます。
SVGのパスでアニメーションをつけているので、CSSより凝った動きでフレンドリーな印象です。UXにも大きく効果がありそうですね。

気を付けること

注意しておくこととして、IEとEDGEでは表示が安定しておらず一部線が消えてしまったりするようです。

最近はiPhoneやiPadを筆頭に高解像度のディスプレイが普及してきたのでSVGが大活躍している気がします。
サイトを訪れた人が「おっ」と思うような、ちょっとしたアクセントでホームページもより良くしていきたいですね。