Image Search icon
Used to represent images in content and photo editing scenarios. The Image Search icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Image Search icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { ImageSearch24Regular, ImageSearch24Filled } from "@fluentui/react-icons";
export function Example() {
return <ImageSearch24Regular aria-label="Image Search" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_image_search_24_regular.svg" width="24" height="24" alt="Image Search"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 6.25C21 4.45507 19.5449 3 17.75 3H6.25C4.45507 3 3 4.45507 3 6.25V10.7572C3.44631 10.3886 3.95177 10.089 4.5 9.87494V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 17.9588 19.4634 18.159 19.3964 18.3447L13.5742 12.6431L13.4458 12.5266C12.8091 11.9916 11.9464 11.8648 11.2026 12.1461C11.4616 12.572 11.6644 13.0359 11.8007 13.5275C12.0498 13.4591 12.3273 13.5215 12.5247 13.7148L18.3305 19.4014C18.1489 19.4653 17.9535 19.5 17.75 19.5H12.9748L13.4874 20.0126C13.7654 20.2905 13.9303 20.6387 13.9821 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25ZM17.5042 8.75212C17.5042 7.50831 16.4959 6.5 15.2521 6.5C14.0083 6.5 13 7.50831 13 8.75212C13 9.99592 14.0083 11.0042 15.2521 11.0042C16.4959 11.0042 17.5042 9.99592 17.5042 8.75212ZM14.5 8.75212C14.5 8.33673 14.8367 8 15.2521 8C15.6675 8 16.0042 8.33673 16.0042 8.75212C16.0042 9.1675 15.6675 9.50423 15.2521 9.50423C14.8367 9.50423 14.5 9.1675 14.5 8.75212ZM9.95001 17.8894C10.6054 17.1076 11 16.0999 11 15C11 12.5147 8.98528 10.5 6.5 10.5C4.01472 10.5 2 12.5147 2 15C2 17.4853 4.01472 19.5 6.5 19.5C7.34245 19.5 8.13082 19.2685 8.80499 18.8656L11.7197 21.7803C12.0126 22.0732 12.4874 22.0732 12.7803 21.7803C13.0732 21.4874 13.0732 21.0126 12.7803 20.7197L9.95001 17.8894ZM6.5 18C4.84315 18 3.5 16.6569 3.5 15C3.5 13.3431 4.84315 12 6.5 12C8.15685 12 9.5 13.3431 9.5 15C9.5 16.6569 8.15685 18 6.5 18Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/image_search_24_regular.svg";Details
| Name | Image Search |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_image_search_24_regular.svg |
| Filled file | ic_fluent_image_search_24_filled.svg |
| React components | ImageSearch24Regular, ImageSearch24Filled |
| License | MIT (© Microsoft Corporation) |