color of SVG icon isn't changing completely

I’m trying to change the color of the svg by passing the color attribute. In my case to black. The result is as on the screenshot below:

Partial grey/black instead of fully black

I’m using React and have my custom Icon components which accepts SVG attribute props, such as color. As you can see the icon is not completely in black. There are just a few of my icons behave like this.

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none">

    <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        <path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="#CED4DA"
              d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
        <path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m12.6666,18l1.3334,0"/>
        <path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m18,18l1.3333,0"/>
        <path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m11.3334,20.6667l0,1.3333"/>
        <path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m20.6666,20.6667l0,1.3333"/>
        <path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
        <path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m4.66663,8.66666l1.33333,0"/>
        <path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m10,8.66666l1.3333,0"/>
        <path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m3.33337,11.3333l0,1.3333"/>
        <path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m12.6666,11.3333l0,1.3333"/>
        <path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
    </g>
</svg>

>Solution :

I can’t reproduce the output as in the screenshot, but your <path>s have their own stroke="#CED4DA" attributes, so they won’t inherit their stroke color from the svg. You can try to change them to stroke="currentColor". Then the "color" attribute of the svg will affect all those paths.

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" color="black">

    <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        <path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor"
              d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
        <path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m12.6666,18l1.3334,0"/>
        <path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m18,18l1.3333,0"/>
        <path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m11.3334,20.6667l0,1.3333"/>
        <path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m20.6666,20.6667l0,1.3333"/>
        <path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
        <path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m4.66663,8.66666l1.33333,0"/>
        <path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m10,8.66666l1.3333,0"/>
        <path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m3.33337,11.3333l0,1.3333"/>
        <path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m12.6666,11.3333l0,1.3333"/>
        <path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
    </g>
</svg>

Leave a Reply