Use boolean operations

I need the icon set combined into single vector shapes so handoff to engineering is cleaner. Merge the overlapping bell, dot and ring into one path for production, keeping the visual silhouette exactly as on the artboard. Do this for the three notification states on Frame Notifications-Active, Notifications-Idle, Notifications-Muted and check there are no hidden stray points before exporting the SVGs.

Before I send these to engineering, make the boolean results obvious to a reviewer: put the merged icon on the left and the original layers on the right, label which operation was used (union, subtract, intersect) and flag any compound paths that still contain invisible fills. Call out where that union changed stroke widths or rounded corners so the developer knows to expect visual shifts.

I merged the bell and ring with Union on the main notification icon and the silhouette is off — the stroke appears thicker and corners softened. I am showing this to the design engineer, the product manager, and Sam in frontend. I do not know whether this is a boolean artifact, stroke treatment, or an export setting. What is the most likely cause and the simplest fix so the SVG matches the original pixels?

Every sprint we fix dozens of small shape differences after boolean merges — accidental extra points, altered corner radii, invisible fills that break exports. I am the lead designer and it wastes implementation time. Which habit should I change in my workflow to stop this recurring rework and what one tooling check should I add before handing assets to engineering?