こいつ、動くぞ! UIデザインでよく使用されるSVG完備のアイコン素材、しかもオープンソースで商用無料 -Potlab Icons

WebサイトやスマホアプリのUIでよく見かける、かわいいアニメーションで実装されたSVGアイコンを紹介します。

紙飛行機が飛ぶメールアイコン、アローが下向きに動くダウンロードアイコン、上向きに動くアップロードアイコンをはじめ、ハート、スター、サーチなど、それぞれに適したアニメーションが楽しめます。

WebサイトやスマホアプリのUIでよく使用される商用利用無料のSVGアイコン素材 -Potlab Icons

Potlab Icons

Potlab Iconsのアイコンは、簡単に利用できます。
サイトにアクセスし、アイコンをクリックするとコピペボタンが表示されるので、コードをコピペして利用します。

アイコンをクリックして、コードをコピペ

アイコンをクリックして、コードをコピペ

アイコンのライセンスはCC 4.0のオープンソース、商用プロジェクトでも無料で利用でき、改変、再配布もOKです。

以下にアニメーションで動くSVGアイコンをいくつか、コピペしてみました。
SVGなので、サイズは簡単に変更できます。

「Send」アイコン

コピペしたコードには<style>が含まれています。確かHTML5.2で<style>body内に記述してもよいとかに一時的になりましたが、HTML Living Standardでは「head要素の子に記述」となっています。
そのため、コピペしたコードの<style>から</style>head内に移動してご利用ください。

「Archive」アイコン

「Download」アイコン

「Chevron Right Circle」アイコン

「Exclamation Triangle」アイコン

「Heart」アイコン

「Love」アイコン

「Loader 3」アイコン

Potlab Iconsには他にもたくさんのSVGアイコンが揃っています。

SVGアイコンのキャプチャ

アニメーションで動くSVGアイコン

sponsors

top of page

©2022 coliss