• 2020-05-14

    Convert a colored icon to black or white

    Comments

    Start a discussion

    No matter if you have a inline SVG file or a background external SVG file.

    With filters like grayscale and brightness you can have your colored icon black or white.

    HTML

    <div class="icon1"></div>

    CSS

    div:after {
      content: '';
      display: block;
      height: 24px;
      width: 24px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='rgba(45,191,255,1)'/%3E%3C/svg%3E");
    }
    
    .icon1:after {
      filter: grayscale(1) brightness(200%);
    }

    Sources

    You saw it first on CSSPoo.