How can I change the Bootstrap 4 navbar button icon color?

The navbar-toggler-icon (hamburger) in Bootstrap 4 uses an SVG background-image. There are 2 “versions” of the toggler icon image. One for a light navbar, and one for a dark navbar…

• Use navbar-dark for a light/white toggler on darker backgrounds
• Use navbar-light for a dark/gray toggler on lighter backgrounds

---

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

Therefore, if you want to change the color of the toggler image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke="rgba(255,102,203, 0.5)" value in the SVG data:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba(255,102,203, 0.5)" stroke-width="2" stroke-linecap='round' stroke-miterlimit="10" d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

Demo http://www.codeply.com/go/4FdZGlPMNV

OFC, another option to just use an icon from another library ie: Font Awesome, etc..

---

Update Bootstrap 4.0.0:

As of Bootstrap 4 Beta, navbar-inverse is now navbar-dark to use on navbars with darker background colors to produce lighter link and toggler colors.

---

How to change Bootstrap 4 Navbar colors