Before After black outline icon

SaveBefore After black outline icon
Color
StrokeRegular ·1.0×
Outline
Filled
Before After Black Filled icon

Circle icon split by a vertical line with Before and After labels on each side

✨ Ready styles — click one to customize it in the Advanced editor

About the Before After black outline icon

Inside a thin circular frame, a vertical divider separates two rounded label buttons marked Before and After, the classic layout of a comparison slider. It communicates transformation, measurable results and side-by-side review. Drop it into fitness and diet apps, photo editing tools, dental and cosmetic clinic pages, home renovation portfolios or agency case study decks.

The outer ring keeps the mark balanced while the centered split line does the real work, with the two pills at equal weight so neither side dominates. Pair it with compare, arrow and star rating icons. Keep it at 32 px or larger so the wordmarks stay legible.

This is the black outline version of the before after icon: even, monoline strokes that stay crisp at small sizes and suit clean, minimal interfaces, wireframes and light backgrounds.

Download it free as a scalable SVG vector or transparent-background PNG in seven sizes (16 to 512px), copy the SVG code straight into your project, or open it in the free online editor to change colors, apply gold, silver, neon and gradient styles, animate it, or convert it to EPS, PDF and DXF.

Free for personal and commercial use with attribution.

Icons with the same concept