title: White svg icons are not visible when background-color is black
body: <p>I have two icons: </p>
  
  <ol>
  <li><p>bell - icon </p></li>
  <li><p>Setting icon </p></li>
  </ol>
  
  <p>They are presented in navbar, as you can see in right corner on screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/FwjI0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FwjI0.png" alt="enter image description here"></a></p>
  
  <p>When I put on icons wrapper background color on black, that icons are not visible more. </p>
  
  <p>Need help to understand why.</p>
  
  <p>Check the code:</p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;div className="container"&gt;
    &lt;header className="header"&gt;
      &lt;nav className="user-nav"&gt;
        &lt;div className="user-nav-item"&gt;
          &lt;Link href="/"&gt;
            &lt;a className="user-nav-item-link"&gt;Overview&lt;/a&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className="user-nav-item"&gt;
          &lt;Link href="/search"&gt;
            &lt;a className="user-nav-item-link"&gt;Search&lt;/a&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className="user-nav-item"&gt;
          &lt;Link href="/feed"&gt;
            &lt;a className="user-nav-item-link"&gt;Feed&lt;/a&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;h3 className="logo"&gt;Logo&lt;/h3&gt;
      &lt;/nav&gt;
  
      &lt;div className="user-nav-icon"&gt;
        &lt;div className="user-nav-icon-box"&gt;
          &lt;img src={bellIcon} alt="notify icon" /&gt;
        &lt;/div&gt;
        &lt;div className="user-nav-icon-box"&gt;
          &lt;img src={settingsIcon} alt="settings icon" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>.container {
    max-width: 100vw;
    display: flex;
    flex-direction: column;
  
  
  .header {
    display: flex;
    align-items: center;
    height: 5rem;
    color: #fff;
    background-color: black;
  
  
      &amp;-icon {
        display: flex;
        align-items: center;
        background-color: white;
        color: red;
        margin-right: 3rem;
  
        &amp; &gt; * {
          padding: 0 0.8rem;
          cursor: pointer;
        }
  
        &amp;-icon-notification {
          color: red;
        }
      }
    }
  }
  </code></pre>