navbar togle icon change color bootstrap code example

Example 1: bootstrap navbar toggler icon color

.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);
}

Example 2: customize navbar-toggler-icon

// 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;..”); }