Why Bounding Boxes Lie: Keylines and Optical Weight

Well-crafted sets in the SVG Nexus library catalog (such as Material, Phosphor, Lucide, and Tabler) follow classical optical keylines inside a 24×24 grid including a 2px live-area margin:

  • Squares: Typically occupy 18×18 units so their four heavy corners don't overpower neighbors.
  • Circles: Expand to 20×20 units (radius 10) so curved edges match the perceived visual mass of an 18×18 square.
  • Vertical / Horizontal Rectangles: Use 16×20 or 20×16 proportions to balance surface area.

Locking Stroke Width, Terminals, and Scaling Behavior

Document four non-negotiable rules in your design system tokens and verify custom additions using the Pixel Grid and Keylines overlay inside SVG Nexus Studio:

  1. Single stroke-to-grid ratio: For 24×24 icons rendered at 20–24px, standardize on 1.75px or 2px strokes.
  2. Uniform caps & joins: Don't mix stroke-linecap="butt" icons with stroke-linecap="round" icons in the same sidebar.
  3. Minimum 2px interior gap: Parallel strokes closer than 2 grid units merge into a gray smudge on 1× office monitors.
  4. Use vector-effect when scaling diagrams: On resizable schematic shapes where line thickness must remain constant regardless of zoom, apply vector-effect="non-scaling-stroke".