Change SVG stroke color in CSS [duplicate]

Solution 1:

Approach #1

You'll need to specify a color for the stroke property:

stroke="rgb(255, 255, 255)"

Working Example:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  margin-left: 4px;
  transform: translateY(4px);
}

<button type="button">
Eksporter

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="rgb(255, 255, 255)" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

Approach #2

You can use CSS instead of SVG attributes.

Working Example:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  transform: translateY(4px);
  stroke-width: 2px; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.red svg {
  stroke: rgb(255, 0, 0);
}

button.yellow svg {
  stroke: rgb(255, 255, 0);
}

button.green svg {
  stroke: rgb(0, 255, 63);
}

<button type="button" class="red">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="yellow">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="green">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

Change SVG stroke color in CSS [duplicate]

Solution 1:

Approach #1

Approach #2

Related

Recent Posts