Skip to main content
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.