🎨 CSS fill — Complete Tutorial

The CSS fill property is used to apply color to the interior of SVG shapes such as icons, paths, circles, text, and other vector elements. It is one of the most important properties when working with inline SVG icons or illustrations.

>>“If you want to color an SVG icon with CSS, you use fill.”

Note

✔ Works only on SVG elements (not regular HTML)

✔ Can apply flat colors, gradients, or even currentColor

✔ Does not affect borders—that's stroke

📌 What Can fill Style?

  • SVG shapes like <path>, <circle>, <rect>
  • SVG text (<text>)
  • Inline SVG icons
  • SVG symbols used through <use>

📦 Syntax

Basic Syntax

fill: <color> | none | currentColor;

🎯 Most Common Values

ValueDescription
fill: red;Solid color
fill: none;No fill (transparent interior)
fill: currentColor;Matches the color property of the parent

Note

💡 currentColor is extremely useful for coloring icons in button, navbars, and UI components.

🎨 1. Basic Example — Color an SVG Path

Fill a path

svg path {
  fill: #ff4757;
}

🎨 2. Fill SVG Icons Using currentColor

This lets your SVG automatically adopt the text color of its parent — perfect for theming.

Icon inherits parent color

.icon {
  color: teal;
}

.icon svg {
  fill: currentColor;
}

🎨 3. Remove Fill Completely

Useful for icons where only the outline should show.

No fill

svg path {
  fill: none;
}

🎨 4. Apply Gradients as Fill

Gradient fill

svg path {
  fill: url(#myGradient);
}

📌 5. Target SVG Elements Directly

Circle, rect, text

circle { fill: blue; }
rect { fill: orange; }
text { fill: black; }

💡 Useful Tip — Make an SVG Fillable via CSS

Some SVG icons from libraries hard-code the fill attribute inside the SVG. To make them stylable via CSS, remove the fill="value" attribute or set it to currentColor.

Inline SVG made fillable

<svg fill="currentColor" viewBox="0 0 24 24">...</svg>

🧪 Real-World Use Cases

1️⃣ Button Icons

Icon inside button

button svg {
  fill: currentColor;
}

2️⃣ Dark/Light Theme Compatible Icons

Theme-aware

body.dark svg { fill: white; }
body.light svg { fill: black; }

3️⃣ Multi-colored SVG Logos

Multiple fills

.logo path:nth-child(1) { fill: #e74c3c; }
.logo path:nth-child(2) { fill: #3498db; }

⚠️ Common Mistakes

  • ❌ Trying to use fill on HTML elements like <div>
  • ❌ Icons not changing color because SVG has a hardcoded fill attribute
  • ❌ Forgetting stroke is different (outline vs interior)
  • ❌ Using fill on <img src="icon.svg"> — must be inline SVG to work

Note

To style fill, your SVG must be inline or used with <use>.

🔥 Summary

The fill property colors the inside of SVG shapes. It's essential for icon systems, branding, UI elements, and theme-aware designs.

>>“If stroke draws the outline, fill paints the soul of the SVG.”