CSS - Search Icon

Code example for drawing a magnifying glass (search) icon using HTML and CSS.

This HTML code sets the class name "search-icon" on the <div> tag that will draw the search icon.

<div class="search-icon"></div>

The pseudo elements "before" and "after" create the top and bottom parts of the icon.

The CSS custom property "--w" specifies the reference width for the shape.
It also uses the custom property "--angle" to allow rotating the search icon.

/* Magnifying Glass */
.search-icon {
	--w: 300px; /* Base Size */
	--angle: -40deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* Top part */
.search-icon::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 15%;
	width: 70%;
	height: 70%;
	border: solid #00bfff calc(var(--w) * 0.15);
	border-radius: 50%;
	box-sizing: border-box;
	transform-origin: center bottom;
}

/* Bottom part */
.search-icon::after {
	content: "";
	position: absolute;
	top: 70%;
	left: 42.5%;
	width: 15%;
	height: 25%;
	background-color: #00bfff;
	transform-origin: center top;
}