Вы когда-нибудь мечтали создать иконку увеличительного стекла, используя только CSS, вместо скучного svg?

Скорее всего - нет. Но, несмотря на Ваш ответ, давайте сделаем это.

Для начала нам понадобится окружность:

.magnifying-glass {
    position: relative;
    
    width: 100px;
    height: 100px; 
    
    box-sizing: border-box;
    background-color: aliceblue;
    
    border: 15px solid slategray;
    border-radius: 50%;
}

Половину работы мы уже сделали. Осталось создать и правильно разместить ручку для нашей лупы:

.magnifying-glass {
    position: relative;
    
    width: 100px;
    height: 100px; 
    
    box-sizing: border-box;
    background-color: aliceblue;
    
    border: 15px solid slategray;
    border-radius: 50%;
}

.magnifying-glass:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    
    width: 50px;
    height: 15px;
    background-color: slategray;
    
    border-radius: 0 7.5px 7.5px 0;
    
    transform-origin: 0 50%;
    transform: translateX(100%) rotate(45deg);
}

Вот и все, теперь мы знаем, как просто создать лупу на чистом CSS.

Почему не SVG

Как мы видим, создавать фигуры с помощью CSS несколько сложнее чем использовать уже готовые картинки в svg. Но CSS фигуры дают нам значительно больше возможностей для интерактивности. Например, можно создавать довольно интересные hover-эффекты.

Для того, чтобы упростить работу с CSS-фигурой, хорошим решением будет добавить обертку:

<div class="heart-wrapper">
    <div class="heart"></div>
</div>

И, наконец, для тех, кто читал предыдущие статьи (ссылки находятся в конце текста), небольшой пример - масштабирование сердца при наведении курсора:

.heart {
    position: relative;
    
    width: 200px;
    height: 160px;
}

.heart:before,
.heart:after {
    position: absolute;
    content: "";
    
    width: 100px;
    height: 160px;
    left: 100px;
    
    background-color: tomato;
    
    border-radius: 100px 100px 0 0;
    
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart:after {
    left: 0;
    
    transform-origin: 100% 100%;
    transform: rotate(45deg);
}

    .heart-wrapper {
    cursor: pointer;
    
    width: 200px;
    height: 160px;
    
    transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}

.heart-wrapper:hover {
    transform-origin: 50% 50%;
    transform: scale(1.3);
}

Спасибо за внимание

Учимся создавать фигуры с помощью CSS

ссылки на все статьи этой серии:

1. Сердце
2. Бриллиант
3. Лупа