How to Make a Magnifying Glass Icon with CSS

Create a clean, scalable magnifying glass icon using only CSS. Below you’ll find a live preview plus two production-ready methods you can drop into your project.

Live Preview: Magnifying Glass Icon

Method 1: Pseudo-Element Handle + Circular Border

/* Magnifying glass built with a circular border (lens) and a rotated
   pseudo-element for the handle */
.magnifier {
  width: 120px;
  height: 120px;
  border: 10px solid #cd5454;   /* lens ring */
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

/* handle */
.magnifier::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 64px;
  background: #cd5454;
  border-radius: 6px;
  right: 6px;          /* snug to ring */
  bottom: -8px;        /* placed just outside the circle */
  transform: rotate(45deg);
  transform-origin: top center;
}

/* optional: center the icon block */
.magnifier {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using an SVG Background (Data URI) via CSS

/* One-element solution using an inline SVG as a CSS background */
.magnifier-svg {
  width: 150px;
  height: 150px;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g stroke="%23cd5454" stroke-width="12" stroke-linecap="round" fill="none"><circle cx="58" cy="58" r="34"/><line x1="88" y1="88" x2="125" y2="125"/></g></svg>');
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Tip: change color by editing %23cd5454 in the data URI. */

How This Works

In Method 1, the lens is a circle created by border-radius: 50% with a thick border for the ring. The handle is a single pseudo-element positioned at the edge of the lens and rotated 45 degrees to look like a magnifying glass handle.

In Method 2, an SVG is embedded directly in CSS as a background image. The circle stroke forms the lens ring and a simple line becomes the handle. Because it’s vector, it scales crisply to any size.

How to Center Content Inside a Magnifying Glass Icon

The easiest way to center text or an icon inside the lens is to turn the magnifier container into a Flexbox or Grid layout.

Method 1: Use CSS Flexbox

.magnifier {
  /* existing shape styles... */
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

.magnifier span {
  /* your centered content */
  font: 600 14px/1.2 system-ui, sans-serif;
}

Method 2: Use CSS Grid

.magnifier {
  /* existing shape styles... */
  display: grid;
  place-items: center;
}

.magnifier span {
  font: 600 14px/1.2 system-ui, sans-serif;
}

When to Use Each Shape Method

Use the pseudo-element method when you want pure CSS with easy theme control via regular properties (borders, sizes, rotation). Use the SVG background when you need pixel-perfect scaling, crisp rendering at any size, or more complex detailing without extra DOM elements.

Quick Customizations

Change the color by editing the border and background to your brand color (or replace %23cd5454 in the SVG). Increase the ring thickness by adjusting border width (Method 1) or stroke-width in the SVG (Method 2); add a soft glow with box-shadow on the container.

Accessibility & SEO

Treat decorative icons as presentational, or add role=”img” and an aria-label to convey purpose (e.g., aria-label=”Search”) for screen readers.