自分のアイコンをHTMLとCSSで作る

  .row {
    display: flex;
    flex-direction: row;
  }
  .cell {
    width: 100px;
    height: 40px;
  }

  <div id="container">
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
  </div>```

background: linear-gradient(to bottom, #1DE9B6 0%, #00E676 100%);

  :root {
    --cell-width: 100px;
    --cell-height: 36px;
  }
  .cell {
    width: var(--cell-width);
    height: var(--cell-height);
  }

  .foo {
    top: calc(var(--cell-height) * 6);
  }