If your SVG icons look slightly different on the website (especially curves or rounded edges), the issue is usually caused by how strokes are rendered after export. Browsers can interpret SVG strokes differently than Illustrator, which leads to small visual distortions.
To fix this, convert all strokes to shapes and export with the correct settings:
Step 1 — Convert strokes to shapes
Open your icon in Illustrator
Select the entire icon
Go to: Object → Path → Outline Stroke
Step 2 — Export as SVG with correct settings
Go to: File → Save As → SVG
Use these settings:
SVG Profile: SVG 1.1
CSS Properties: Presentation Attributes
Decimal Places: 4
Image Location: Embed
Responsive: Unchecked
Additional Instructions/Information
Always keep an editable .AI version before outlining strokes
After outlining, you won’t be able to adjust stroke thickness
Decimal Places 4 gives the best balance between smooth curves and file size
If exporting multiple icons, you can outline all strokes at once before export
Optimized by Seraphinite Accelerator