Add icons to this collection by clicking the heart icon.
Animation icon - also known as computer, monitor, ui, electronics, animate, animation, art and design, and motion graphic. Created in a clean lineal color style with a white, silver, black, and pink finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="682.667"
height="682.667"
viewBox="0 0 682.667 682.667"
>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<path
d="M306.651 41.781H205.34v81.391h101.311z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#b6c4cf"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M230.34 41.785h-25v81.39h25z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#9facba"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0v-269.91h-497V0c0 8.84 7.16 16 16 16h465C-7.17 16 0 8.84 0 0"
transform="translate(504.5 439.355)"
fill="#bde4ff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c-8.84 0-16-7.16-16-16v-269.91h-25V-16c0 8.84 7.16 16 16 16z"
transform="translate(48.5 455.355)"
fill="#99dbff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-323.6h-385.79V.01Z"
transform="translate(448.89 467.135)"
fill="#f2fbff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-360.79a4 4 0 0 0-4 4v273.025h-21v-323.61h21v22.498H0Z"
transform="translate(448.89 190.12)"
fill="#d8ecfe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-47.13c0-8.84-7.17-16-16-16h-465c-8.84 0-16 7.16-16 16V0Z"
transform="translate(504.5 169.445)"
fill="#f2fbff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-25c-8.84 0-16 7.16-16 16v47.13h25V16C-16 7.16-8.84 0 0 0"
transform="translate(48.5 106.315)"
fill="#d8ecfe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-25.804c0-5.523-4.477-10-10-10h-175.476c-5.522 0-10 4.477-10 10V0c0 5.523 4.478 10 10 10H-10C-4.477 10 0 5.523 0 0"
transform="translate(353.734 47.4)"
fill="#f2fbff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-25c-5.52 0-10 4.48-10 10v25.81c0 5.52 4.48 10 10 10H0c-5.52 0-10-4.48-10-10V10C-10 4.48-5.52 0 0 0"
transform="translate(193.26 11.595)"
fill="#d8ecfe"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-25.41c0-2.21-1.79-4-4-4h-75.34c-2.21 0-4 1.79-4 4V0Z"
transform="translate(297.666 169.443)"
fill="#b6c4cf"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-25c-2.21 0-4 1.79-4 4v25.41h25V4c0-2.21 1.79-4 4-4"
transform="translate(243.33 140.035)"
fill="#9facba"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-21.27h-385.78l-.01.01V0c0 6.62 5.38 12 12 12H-12C-5.38 12 0 6.62 0 0"
transform="translate(448.89 488.405)"
fill="#e490d0"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-21.27h-21V0c0 6.62 5.38 12 12 12h21C5.38 12 0 6.62 0 0"
transform="translate(84.1 488.405)"
fill="#df73c1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0-10.174-8.247-18.421-18.421-18.421S-36.842-10.174-36.842 0s8.247 18.421 18.421 18.421S0 10.174 0 0"
transform="translate(399.589 410.717)"
fill="#e490d0"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-16.976 16.976a2 2 0 0 0 0 2.828L0 36.78a2 2 0 0 0 2.828 0l16.976-16.976a2 2 0 0 0 0-2.828L2.828 0A2 2 0 0 0 0 0"
transform="translate(183.838 214.55)"
fill="#ffe07d"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-28.572a2 2 0 0 0-2 2v30.985a2 2 0 0 0 2 2H0a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2"
transform="translate(347.405 264.786)"
fill="#c1e9af"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-16.976 16.976a2 2 0 0 0 0 2.828L0 36.78a2 2 0 0 0 2.828 0l16.976-16.976a2 2 0 0 0 0-2.828L2.828 0A2 2 0 0 0 0 0"
transform="translate(257.524 214.55)"
fill="#ffe07d"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v15.84c0 8.84 7.16 16 16 16h39.61"
transform="translate(7.5 423.52)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h39.61c8.84 0 16-7.16 16-16v-317.04c0-8.84-7.16-16-16-16h-465c-8.84 0-16 7.16-16 16v266.2"
transform="translate(448.89 455.36)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-497"
transform="translate(504.5 169.444)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h16.69c5.52 0 10 4.47 10 10v25.8c0 5.53-4.48 10-10 10h-175.48c-5.52 0-10-4.47-10-10V10c0-5.53 4.48-10 10-10H-35"
transform="translate(327.05 11.6)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-25.41c0-2.21-1.79-4-4-4h-75.34c-2.21 0-4 1.79-4 4V0"
transform="translate(297.67 169.444)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v318.96c0 6.63-5.37 12-12 12h-361.78c-6.63 0-12-5.37-12-12V0"
transform="translate(448.89 169.44)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-385.78"
transform="translate(448.89 467.138)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v48.92"
transform="translate(306.66 57.4)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v48.92"
transform="translate(205.34 57.4)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 67.097 73.933 67.097 73.933 0"
transform="translate(111.319 371.594)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 57.67 73.933 57.67 73.933 0"
transform="translate(185.252 371.594)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 44.084 73.933 44.084 73.933 0"
transform="translate(259.185 371.594)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 15.33 15.97 26.43 31.49 31.04"
transform="translate(333.12 371.6)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0-10.174-8.247-18.421-18.421-18.421S-36.842-10.174-36.842 0s8.247 18.421 18.421 18.421S0 10.174 0 0Z"
transform="translate(399.589 410.717)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v31.23"
transform="translate(333.12 233.56)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-16.976 16.976a2 2 0 0 0 0 2.828L0 36.78a2 2 0 0 0 2.828 0l16.976-16.976a2 2 0 0 0 0-2.828L2.828 0A2 2 0 0 0 0 0Z"
transform="translate(183.838 214.55)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-28.572a2 2 0 0 0-2 2v30.985a2 2 0 0 0 2 2H0a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
transform="translate(347.405 264.786)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-16.976 16.976a2 2 0 0 0 0 2.828L0 36.78a2 2 0 0 0 2.828 0l16.976-16.976a2 2 0 0 0 0-2.828L2.828 0A2 2 0 0 0 0 0Z"
transform="translate(257.524 214.55)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-4.826"
transform="translate(185.252 330.597)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-4.826"
transform="translate(185.252 291.771)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-4.826"
transform="translate(258.938 330.597)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-4.826"
transform="translate(258.938 291.771)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-35.74"
transform="translate(239.96 232.94)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-127.82"
transform="translate(405.74 232.94)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-60.02"
transform="translate(166.28 232.94)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</svg>
More icons in the same style and category