Skip to content

SVG Style Guide

Jump to bottom
The Laughing Chicken edited this page Mar 10, 2026 · 3 revisions

SVG Style Guide

This guide explains how to prepare SVG icons for GHIcons. Following these standards ensures every icon in the library looks consistent, scales correctly, and works reliably across all React projects.

Read this before submitting an SVG — the automated validation workflow will catch most technical errors, but visual quality and cultural accuracy require a human eye.

The Basics

Every icon in GHIcons is a 24×24 SVG component. This is the industry standard (used by Lucide, Heroicons, and others) and gives icons a predictable, scalable baseline.

Required attributes

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="..." />
</svg>
Attribute Required value Why
viewBox 0 0 24 24 Defines the coordinate space. Must be consistent across all icons
fill currentColor Allows consumers to control icon color via CSS
xmlns http://www.w3.org/2000/svg Required for valid SVG
width / height 24 The component overrides these via props, but set them as fallback

Questions?

If you're unsure whether your SVG meets the standards, paste it into a Discussion or open a draft PR and ask for feedback. We'd rather help you get it right than have you stuck.

Clone this wiki locally