<!-- Plain button -->
<button>Add</button>

<!-- Button with SVG icon -->
<button>
  <svg viewBox="0 0 448 512" width="100" title="plus">
    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />
  </svg>
  Add
</button>
button:has(svg) {
  align-items: center;
  border: 1px solid #ff000055;
  background: #ff0000;
  color: #fff;
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
}

/* Presentational styles */
body {
  align-items: center;
  display: flex;
  gap: 1rem;
  height: 100dvh;
  justify-content: center;
}

svg {
  fill: #fff;
  width: 0.75rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.