Magnifying Glass

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add magnifying-glass --react

Code

React

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function MagnifyingGlassIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-magnifying-glass-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-magnifying-glass-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-magnifying-glass-icon * {
  transform-box: fill-box;
}

.ai-magnifying-glass-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-magnifying-glass-icon .glass {
  transform-box: view-box;
  transform-origin: 6.5px 6.5px;
}

.ai-magnifying-glass-icon:not(.no-hover):hover .glass {
  animation: ai-magnifying-glass-search 700ms ease-in-out;
}

@keyframes ai-magnifying-glass-search {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-1.2px, -1.2px); }
  66% { transform: translate(1.2px, -1.2px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="glass" d="M6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56246 10.6304 8.5378 10.0146 9.30762L12.8535 12.1465L12.918 12.2246C13.0461 12.4187 13.0244 12.6827 12.8535 12.8535C12.6827 13.0244 12.4187 13.0461 12.2246 12.918L12.1465 12.8535L9.30762 10.0146C8.5378 10.6304 7.56246 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2ZM6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3Z" fill="currentColor"/>
      </svg>
    </>
  );
}