つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ Potlab icons

今回はアニメーション実装されたアイコン集、Potlab iconsについて紹介したい。

以前紹介したLoaderと同様にコピー&ペーストですぐに使用できる。

atatat.hatenablog.com

解説は以下のコリス。

coliss.com

使用方法はPotlab iconsのサイトにアクセスして、使用したいアイコンをクリックして右下のArchiveをクリックすればクリップボードにコピーされる。

www.potlabicons.com

LoadersはCSSベースだが、PotlabはHTMLで記述されている。サイズを変更するのはSVGタグ内のwidth, heightを変更すればよい。

実装例コード記載すると冗長なので、以下コードペンを直接添付する。

See the Pen potlab_icon by ATATAT (@atatat) on CodePen.