Use this table to audit your icons before handing them off to developers.
| Category | Checkpoint | Success Criteria | Why it Matters? |
| Grid & Precision | Pixel Snapping | All anchor points for straight lines are on full integers (e.g., X=4, not X=4.2). | Prevents blurry, anti-aliased edges. Ensures crisp lines on low-res screens. |
| Grid & Precision | Stroke Alignment | Strokes are aligned to the Center or Inside(consistent across the set). | Center alignment is standard. Mixing alignments makes icons look like they have different thicknesses. |
| Visual Consistency | Stroke Weight | Every icon uses the exact same stroke width (e.g., 2px). | Even a 0.5px difference is noticeable and makes the UI look messy and unprofessional. |
| Visual Consistency | Corner Radius | Corner roundness is consistent (e.g., all corners are 2px rounded, or all are sharp). | Defines the “personality” of the icon set (friendly vs. strict). |
| Visual Consistency | Optical Balance | Asymmetrical shapes (triangles, checkmarks) are visually centered, even if mathematically off. | The human eye detects imbalance instantly. |
| Simplicity | Detail Level | Unnecessary details are removed. Can you identify the icon if you squint? | Icons are viewed at small sizes (16px-24px). Too much detail turns into “visual noise.” |
| Technical | Compound Paths | The icon is a single combined shape, not a group of overlapping layers. | Allows developers to easily change the color of the icon using one CSS rule (fill or stroke). |
| Technical | Bounded Box | All icons are exported on the same size artboard (e.g., 24x24px frame), even if the shape is smaller. | Ensures icons align perfectly in code without manual padding adjustments. |
| Technical | Clean SVG Code | The code contains no ID tags or embedded CSS styles within the SVG file. | Prevents code conflicts when multiple icons are used on one page. |
