The Icon Grid & Bounding Box Standard

Why do icons exported from different designers frequently look misaligned or uneven when placed in a button?

The issue is inconsistent bounding boxes. A professional design system establishes a strict Icon Grid System:

• Standard Sizes: 16 $\times$ 16px (micro/inline), 20 $\times$ 20px (compact button), 24 $\times$ 24px (standard interactive navigation), 32 $\times$ 32px (feature callout).
• Fixed Square Canvas: Every icon vector must be drawn inside an explicit square frame (e.g., viewBox="0 0 24 24").
• Live Area & Padding: The inner 20 $\times$ 20px is the 'live drawing area'; the outer 2px boundary acts as a protective padding margin so diagonal strokes don't touch the canvas edge.