こいつ、動くぞ！ UIデザインでよく使用されるSVG完備のアイコン素材、しかもオープンソースで商用無料 -Potlab Icons
Post on:2022年11月8日
sponsors
WebサイトやスマホアプリのUIでよく見かける、かわいいアニメーションで実装されたSVGアイコンを紹介します。
紙飛行機が飛ぶメールアイコン、アローが下向きに動くダウンロードアイコン、上向きに動くアップロードアイコンをはじめ、ハート、スター、サーチなど、それぞれに適したアニメーションが楽しめます。
Potlab Iconsのアイコンは、簡単に利用できます。
サイトにアクセスし、アイコンをクリックするとコピペボタンが表示されるので、コードをコピペして利用します。
アイコンをクリックして、コードをコピペ
アイコンのライセンスはCC 4.0のオープンソース、商用プロジェクトでも無料で利用でき、改変、再配布もOKです。
以下にアニメーションで動くSVGアイコンをいくつか、コピペしてみました。
SVGなので、サイズは簡単に変更できます。
「Send」アイコン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <style> .send { animation: send 2s cubic-bezier(1, -0.47, 0.01, 1.37) infinite both; } @keyframes send { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-20px) translateX(20px); } } </style> <g class="send"> <path stroke="#265BFF" stroke-linecap="round" stroke-width="1.5" d="M9.407 14.593l3.058-3.058"/> <path stroke="#0A0A30" stroke-width="1.5" d="M15.564 7.908a.432.432 0 01.528.528l-2.677 10.175a.432.432 0 01-.724.195L5.194 11.31a.432.432 0 01.195-.724l10.175-2.677z"/> </g> </svg> |
コピペしたコードには<style>が含まれています。確かHTML5.2で<style>をbody内に記述してもよいとかに一時的になりましたが、HTML Living Standardでは「head要素の子に記述」となっています。
そのため、コピペしたコードの<style>から</style>をhead内に移動してご利用ください。
「Archive」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide-top{0%{transform:translateY(1px)}to{transform:translateY(-2px)}}</style><path stroke="#0A0A30" stroke-linecap="round" stroke-width="1.5" d="M6 8.55v8.334c0 .92.768 1.667 1.714 1.667h8.572c.947 0 1.714-.746 1.714-1.667V8.551m-7 2.899h2"/><path fill="#265BFF" fill-rule="evenodd" d="M4.087 5.45H3.87a.533.533 0 00-.533.532v.967c0 .295.238.533.533.533h16.26a.533.533 0 00.533-.533v-.967a.533.533 0 00-.533-.533H4.087z" clip-rule="evenodd" style="animation:slide-top 1s cubic-bezier(.86,0,.07,1) infinite alternate-reverse both"/></svg> |
「Download」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide-right{0%{transform:translateY(0)}to{transform:translateY(1px)}}</style><path fill="#265BFF" d="M12.75 6.432a.75.75 0 00-1.5 0h1.5zm-1.5 6a.75.75 0 001.5 0h-1.5zm-1.22-2.53a.75.75 0 10-1.06 1.06l1.06-1.06zm1.97 3.03l-.53.53a.75.75 0 001.06 0l-.53-.53zm3.03-1.97a.75.75 0 00-1.06-1.06l1.06 1.06zm-3.78-4.53v6h1.5v-6h-1.5zm-2.28 4.53l2.5 2.5 1.06-1.06-2.5-2.5-1.06 1.06zm3.56 2.5l2.5-2.5-1.06-1.06-2.5 2.5 1.06 1.06z" style="animation:slide-right .5s cubic-bezier(1,-.43,.68,.57) infinite alternate both"/><path stroke="#0A0A30" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 17.274h8"/></svg> |
「Chevron Right Circle」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide-15{to{transform:translateX(1px)}}</style><rect width="14" height="14" x="5.523" y="5" stroke="#0A0A30" stroke-width="1.5" rx="7"/><path fill="#265BFF" stroke="#265BFF" stroke-linecap="round" stroke-width=".4" d="M11.781 9.154a.429.429 0 00-.659.549L13.038 12l-1.915 2.297a.429.429 0 10.659.549l2.138-2.566a.428.428 0 000-.56l-2.138-2.566z" style="animation:slide-15 1s infinite alternate both cubic-bezier(1,-.01,0,.98)"/></svg> |
「Exclamation Triangle」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes n-info-tri{0%,to{transform:rotate(0deg);transform-origin:center}10%,90%{transform:rotate(2deg)}20%,40%,60%{transform:rotate(-6deg)}30%,50%,70%{transform:rotate(6deg)}80%{transform:rotate(-2deg)}}.prefix__n-info-tri{animation:n-info-tri .8s cubic-bezier(.455,.03,.515,.955) both infinite}</style><path class="prefix__n-info-tri" style="animation-delay:1s" stroke="#0A0A30" stroke-width="1.5" d="M11.134 6.844a1 1 0 011.732 0l5.954 10.312a1 1 0 01-.866 1.5H6.046a1 1 0 01-.866-1.5l5.954-10.312z"/><g class="prefix__n-info-tri"><path stroke="#265BFF" stroke-linecap="round" stroke-width="1.5" d="M12 10.284v3.206"/><circle cx="12" cy="15.605" r=".832" fill="#265BFF"/></g></svg> |
「Heart」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes pulsate{0%,to{transform:scale(1)}50%{transform:scale(.9)}}</style><g style="animation:pulsate .5s ease-in-out infinite both;transform-origin:center center" stroke-width="1.5"><path stroke="#0A0A30" d="M11.515 6.269l.134.132a.5.5 0 00.702 0l.133-.132A4.44 4.44 0 0115.599 5c.578 0 1.15.112 1.684.33a4.41 4.41 0 011.429.939c.408.402.733.88.954 1.406a4.274 4.274 0 010 3.316 4.331 4.331 0 01-.954 1.405l-6.36 6.259a.5.5 0 01-.702 0l-6.36-6.259A4.298 4.298 0 014 9.333c0-1.15.464-2.252 1.29-3.064A4.439 4.439 0 018.401 5c1.168 0 2.288.456 3.114 1.269z"/><path stroke="#265BFF" stroke-linecap="round" stroke-linejoin="round" d="M15.5 7.5c.802.304 1.862 1.43 2 2"/></g></svg> |
「Love」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes love-face{0%,to{transform:scale(.9)}50%{transform:scale(1.2)}}</style><circle cx="12.867" cy="12" r="7" stroke="#0A0A30" stroke-width="1.5"/><path stroke="#0A0A30" stroke-linecap="round" d="M15.867 14.147l-.048.04a4.631 4.631 0 01-5.952-.04"/><path fill="#265BFF" d="M9.792 9.65c.042.042.11.042.151 0a.694.694 0 011.122.22.667.667 0 01-.149.738l-.698.687a.5.5 0 01-.701 0l-.698-.687a.672.672 0 010-.957.694.694 0 01.973 0zm6 0c.042.042.11.042.151 0a.694.694 0 011.122.22.667.667 0 01-.149.738l-.698.687a.5.5 0 01-.701 0l-.698-.687a.672.672 0 010-.957.693.693 0 01.973 0z" style="animation:love-face 1s ease-in-out infinite both;transform-origin:center center"/></svg> |
「Loader 3」アイコン
|
1 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader3{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#0A0A30" d="M6.685 13.626a1.626 1.626 0 100-3.252 1.626 1.626 0 000 3.252zm5.315 0a1.626 1.626 0 100-3.252 1.626 1.626 0 000 3.252zm5.316 0a1.626 1.626 0 100-3.252 1.626 1.626 0 000 3.252z" style="animation:loader3 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg> |
Potlab Iconsには他にもたくさんのSVGアイコンが揃っています。
アニメーションで動くSVGアイコン
sponsors
