CSS Tip

CSS-only plus/cross icon

Create a plus icon ➕ or a cross icon ✖️

CSS-only cross/plus icon

.plus {
  --b: 10px;   /* the thickness*/
  --c: #0000 90deg,#000 0; /* the coloration */
  width: 50px; /* the size */
  aspect-ratio: 1;
  background:
    conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
    calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
    calc(50%  + var(--b))   calc(50%  + var(--b));
}

See the Pen Plus symbol /Cross Symbol by Temani Afif (@t_afif) on CodePen.

More CSS Shapes: css-shape.com

More CSS Tips