SVG Colouring Paths


Colouring a specific path in our SVG element

24 Jul, 2020 Β· 2 min read

Since we did our SVG Sprites yesterday, I wondered if it was possible to color each specific path. And it turns out you can do so.

So for my example, I took an icon of four elements, a man and a woman, and the heads are separate from the bodies.

HTML Structure

  style="position: absolute; width: 0; height: 0; overflow: hidden;"
    <symbol id="icon-man-woman" viewBox="0 0 32 32">
        d="M8 3c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"
        d="M26 3c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"
        d="M8 8h-6c-1.105 0-2 0.895-2 2v10h2v12h2.5v-12h1v12h2.5v-12h2v-10c0-1.105-0.895-2-2-2z"
        d="M30.469 16l1.531-1.109-4.165-6.441c-0.185-0.281-0.499-0.45-0.835-0.45h-8c-0.336 0-0.65 0.169-0.835 0.45l-4.165 6.441 1.531 1.109 3.458-4.487 1.202 2.804-4.191 7.683h3.833l0.667 10h2v-10h1v10h2l0.667-10h3.833l-4.191-7.683 1.202-2.804 3.458 4.487z"

<svg class="icon icon-man-woman">
  <use xlink:href="#icon-man-woman"></use>

As you can see, there are four paths in our definition symbol.

So how do we go about styling them all a different color?

Styling a CSS Path

I’m going to use the nth-child selector for each specific path.

#icon-man-woman {
  path {
    &:nth-child(1) {
      fill: #83c5be;
    &:nth-child(2) {
      fill: #ffddd2;
    &:nth-child(3) {
      fill: #006d77;
    &:nth-child(4) {
      fill: #e29578;

This will result in the following:

See the Pen SVG Colouring Paths by Chris Bongers (@rebelchris) on CodePen.

Browser Support

The support is pretty good!

SVG Fragment support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Submit button outside the form

4 Dec, 2022 Β· 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 Β· 3 min read

Trying out native dialog modals

Join 2099 devs and subscribe to my newsletter