Add icons to this collection by clicking the heart icon.
Before icon - also known as photo, before, compare, after, effects, edit tools, and retouch. Created in a clean lineal color style, 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>
<g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0v-245c0-16.57-13.43-30-30-30h-203.5v30H-35c2.76 0 5 2.24 5 5V-5c0 2.76-2.24 5-5 5h-198.5v30H-30C-13.43 30 0 16.57 0 0"
transform="translate(504.5 378.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-245c0-16.57-13.43-30-30-30h-30c16.57 0 30 13.43 30 30V0c0 16.57-13.43 30-30 30h30C-13.43 30 0 16.57 0 0"
transform="translate(504.5 378.5)"
fill="#6ce79a"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c51.086 0 92.5-41.414 92.5-92.5S51.086-185 0-185z"
transform="translate(270.997 348.5)"
fill="#ff9ba2"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0-25.54-10.36-48.67-27.1-65.41C-43.84-82.15-66.96-92.5-92.5-92.5v4.98c13.48 4.61 25.54 12.25 35.4 22.11C-40.36-48.67-30-25.54-30 0c0 40.59-26.14 75.06-62.5 87.52v4.98C-41.42 92.5 0 51.09 0 0"
transform="translate(363.5 256)"
fill="#ff8188"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-40a5 5 0 0 0-5-5h-20a5 5 0 0 0-5 5V5c0 16.568 13.432 30 30 30h45a5 5 0 0 0 5-5V10a5 5 0 0 0-5-5H5a5 5 0 0 1-5-5"
transform="translate(37.5 373.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v40a5 5 0 0 1-5 5h-20a5 5 0 0 1-5-5V-5c0-16.568 13.432-30 30-30h45a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5H5a5 5 0 0 0-5 5"
transform="translate(37.5 138.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-53.5a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5"
transform="translate(176 378.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-25a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H0Z"
transform="translate(241 378.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-53.5a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5"
transform="translate(176 103.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-20a5 5 0 0 0-5 5v75a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5"
transform="translate(32.5 213.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-25a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H0Z"
transform="translate(241 103.5)"
fill="#9ff497"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-20a5 5 0 0 0-5 5v415a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5"
transform="translate(266 43.5)"
fill="#6c5e69"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h200.99c16.569 0 30 13.432 30 30v245c0 16.568-13.431 30-30 30H-2.51V-55a5 5 0 0 0-5-5h-20a5 5 0 0 0-5 5v415a5 5 0 0 0 5 5h20a5 5 0 0 0 5-5v-20"
transform="translate(273.51 103.5)"
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-138.325"
transform="translate(412.14 133.5)"
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 0h195.99a5 5 0 0 0 5-5v-235a5 5 0 0 0-5-5h-22.36"
transform="translate(273.51 378.5)"
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 0c50.351-.852 90.905-41.933 90.905-92.486 0-50.247-40.063-91.136-89.988-92.467"
transform="translate(272.592 348.486)"
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 0c-14.752-.402-28.642-4.26-40.89-10.791"
transform="translate(238.424 348.465)"
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 0c12.186-6.499 25.997-10.35 40.666-10.785"
transform="translate(197.533 174.327)"
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 0c2.872-18.921 11.476-35.958 23.984-49.288"
transform="translate(149.55 242.003)"
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 0c-12.506-13.329-21.109-30.364-23.981-49.281"
transform="translate(173.53 319.282)"
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-40a5 5 0 0 0-5-5h-20a5 5 0 0 0-5 5V5c0 16.568 13.432 30 30 30h45a5 5 0 0 0 5-5V10a5 5 0 0 0-5-5H5a5 5 0 0 1-5-5Z"
transform="translate(37.5 373.5)"
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 0v40a5 5 0 0 1-5 5h-20a5 5 0 0 1-5-5V-5c0-16.568 13.432-30 30-30h45a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5H5a5 5 0 0 0-5 5Z"
transform="translate(37.5 138.5)"
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-53.5a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5Z"
transform="translate(176 378.5)"
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-23a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H.229"
transform="translate(239 378.5)"
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-53.5a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5Z"
transform="translate(176 103.5)"
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-20a5 5 0 0 0-5 5v75a5 5 0 0 0 5 5H0a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5Z"
transform="translate(32.5 213.5)"
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-23.229a5 5 0 0 0-5 5v20a5 5 0 0 0 5 5H.229"
transform="translate(239.23 103.5)"
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