Motion icon · Free

Piggy Bank icon — animated SVG

A free piggy bank motion icon that acts out its meaning. The animation is pure CSS inside the SVG, so it works in any website or app without Lottie or JavaScript. 24px grid, 2px stroke, round caps. Free for personal and commercial use.

Copy hover SVGCopy looping SVG Copy SVG Download SVG Open in UAsset

Hover SVG code (plays when hovered)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="uah-piggy-bank" overflow="visible"><style>.uah-piggy-bank g.uam,.uah-piggy-bank [class^=p]{transform-box:fill-box;transform-origin:center}:is(.uah-piggy-bank:hover,:hover>.uah-piggy-bank,:focus-visible>.uah-piggy-bank) .pa{animation:uaLcoinDrop 0.80s cubic-bezier(.65,0,.35,1) 0s 1 both}:is(.uah-piggy-bank:hover,:hover>.uah-piggy-bank,:focus-visible>.uah-piggy-bank) g.uam{transform-origin:50% 100%;animation:uaLsquash 0.70s cubic-bezier(.2,.8,.2,1) 0.3s 1 both}@keyframes uaLcoinDrop{0%{transform:translateY(-5px);opacity:0}50%{transform:translateY(2px);opacity:1}51%{opacity:0}100%{transform:none;opacity:1}}@keyframes uaLsquash{0%,100%{transform:none}22%{transform:scale(1.08,.88)}48%{transform:translateY(-2.6px) scale(.95,1.06)}72%{transform:scale(1.04,.95)}}@media (prefers-reduced-motion:reduce){.uah-piggy-bank *{animation:none!important}}</style><g class="uam"><path pathLength="1" d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2V5z"/><path pathLength="1" d="M2 9v1c0 1.1.9 2 2 2h1M16 11h.01"/><g class="pa"><path pathLength="1" d="M10 2h3"/></g></g></svg>

Looping SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="ual-piggy-bank" overflow="visible"><style>.ual-piggy-bank g.uam,.ual-piggy-bank [class^=p]{transform-box:fill-box;transform-origin:center}.ual-piggy-bank .pa{animation:uaLcoinDropL 2.08s cubic-bezier(.65,0,.35,1) 0s infinite}.ual-piggy-bank g.uam{transform-origin:50% 100%;animation:uaLsquashL 1.82s cubic-bezier(.2,.8,.2,1) 0.3s infinite}@keyframes uaLcoinDropL{0.0%{transform:translateY(-5px);opacity:0}19.0%{transform:translateY(2px);opacity:1}19.4%{opacity:0}38.0%{transform:none;opacity:1}}@keyframes uaLsquashL{0.0%,38.0%{transform:none}8.4%{transform:scale(1.08,.88)}18.2%{transform:translateY(-2.6px) scale(.95,1.06)}27.4%{transform:scale(1.04,.95)}}@media (prefers-reduced-motion:reduce){.ual-piggy-bank *{animation:none!important}}</style><g class="uam"><path pathLength="1" d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2V5z"/><path pathLength="1" d="M2 9v1c0 1.1.9 2 2 2h1M16 11h.01"/><g class="pa"><path pathLength="1" d="M10 2h3"/></g></g></svg>

Static SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path pathLength="1" d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2V5z"/><path pathLength="1" d="M2 9v1c0 1.1.9 2 2 2h1M16 11h.01"/><g class="pa"><path pathLength="1" d="M10 2h3"/></g></svg>

Tags: bank, finance, line, outline, piggy, stroke