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 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.66669"
height="682.66669"
viewBox="0 0 682.66669 682.66669"
>
<defs>
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath3263">
<path d="M 0,512 H 512 V 0 H 0 Z" id="path3261" />
</clipPath>
</defs>
<g id="g3255" transform="matrix(1.3333333,0,0,-1.3333333,0,682.66667)">
<g id="g3257">
<g id="g3259" clip-path="url(#clipPath3263)">
<g id="g3265" transform="translate(273.5098,103.5)">
<path
d="m 0,0 h 200.99 c 16.569,0 30,13.432 30,30 v 245 c 0,16.568 -13.431,30 -30,30 H -2.51 V -55 c 0,-2.762 -2.239,-5 -5,-5 h -20 c -2.761,0 -5,2.238 -5,5 v 415 c 0,2.762 2.239,5 5,5 h 20 c 2.761,0 5,-2.238 5,-5 v -20"
id="path3267"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3269" transform="translate(412.1401,133.5)">
<path
d="M 0,0 H -138.325"
id="path3271"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3273" transform="translate(273.5098,378.5)">
<path
d="m 0,0 h 195.99 c 2.761,0 5,-2.238 5,-5 v -235 c 0,-2.762 -2.239,-5 -5,-5 h -22.36"
id="path3275"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3277" transform="translate(272.5923,348.4863)">
<path
d="m 0,0 c 50.351,-0.852 90.905,-41.933 90.905,-92.486 0,-50.247 -40.063,-91.136 -89.988,-92.467"
id="path3279"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3281" transform="translate(238.4243,348.4648)">
<path
d="M 0,0 C -14.752,-0.402 -28.642,-4.26 -40.89,-10.791"
id="path3283"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3285" transform="translate(197.5327,174.3271)">
<path
d="M 0,0 C 12.186,-6.499 25.997,-10.35 40.666,-10.785"
id="path3287"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3289" transform="translate(149.5493,242.0029)">
<path
d="M 0,0 C 2.872,-18.921 11.476,-35.958 23.984,-49.288"
id="path3291"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3293" transform="translate(173.5308,319.2822)">
<path
d="M 0,0 C -12.506,-13.329 -21.109,-30.364 -23.981,-49.281"
id="path3295"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3297" transform="translate(37.5,373.5)">
<path
d="m 0,0 v -40 c 0,-2.762 -2.239,-5 -5,-5 h -20 c -2.761,0 -5,2.238 -5,5 V 5 c 0,16.568 13.432,30 30,30 h 45 c 2.761,0 5,-2.238 5,-5 V 10 C 50,7.238 47.761,5 45,5 H 5 C 2.239,5 0,2.762 0,0 Z"
id="path3299"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3301" transform="translate(37.5,138.5)">
<path
d="m 0,0 v 40 c 0,2.762 -2.239,5 -5,5 h -20 c -2.761,0 -5,-2.238 -5,-5 V -5 c 0,-16.568 13.432,-30 30,-30 h 45 c 2.761,0 5,2.238 5,5 v 20 c 0,2.762 -2.239,5 -5,5 H 5 C 2.239,-5 0,-2.762 0,0 Z"
id="path3303"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3305" transform="translate(176,378.5)">
<path
d="m 0,0 h -53.5 c -2.761,0 -5,2.238 -5,5 v 20 c 0,2.762 2.239,5 5,5 H 0 c 2.761,0 5,-2.238 5,-5 V 5 C 5,2.238 2.761,0 0,0 Z"
id="path3307"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3309" transform="translate(239,378.5)">
<path
d="m 0,0 h -23 c -2.761,0 -5,2.238 -5,5 v 20 c 0,2.762 2.239,5 5,5 H 0.229"
id="path3311"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3313" transform="translate(176,103.5)">
<path
d="m 0,0 h -53.5 c -2.761,0 -5,2.238 -5,5 v 20 c 0,2.762 2.239,5 5,5 H 0 c 2.761,0 5,-2.238 5,-5 V 5 C 5,2.238 2.761,0 0,0 Z"
id="path3315"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3317" transform="translate(32.5,213.5)">
<path
d="m 0,0 h -20 c -2.761,0 -5,2.238 -5,5 v 75 c 0,2.762 2.239,5 5,5 H 0 c 2.761,0 5,-2.238 5,-5 V 5 C 5,2.238 2.761,0 0,0 Z"
id="path3319"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
<g id="g3321" transform="translate(239.2295,103.5)">
<path
d="m 0,0 h -23.229 c -2.762,0 -5,2.238 -5,5 v 20 c 0,2.762 2.238,5 5,5 H 0.229"
id="path3323"
fill="none"
stroke="#000000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</g>
</g>
</g>
</svg>
More icons in the same style and category