Zoom In icon

Use the Zoom In 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 { ZoomIn24Regular, ZoomIn24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ZoomIn24Regular aria-label="Zoom In" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_zoom_in_24_regular.svg" width="24" height="24" alt="Zoom In">

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="M10 6.5C10.4142 6.5 10.75 6.83579 10.75 7.25V9.25H12.75C13.1642 9.25 13.5 9.58579 13.5 10C13.5 10.4142 13.1642 10.75 12.75 10.75H10.75V12.75C10.75 13.1642 10.4142 13.5 10 13.5C9.58579 13.5 9.25 13.1642 9.25 12.75V10.75H7.25C6.83579 10.75 6.5 10.4142 6.5 10C6.5 9.58579 6.83579 9.25 7.25 9.25H9.25V7.25C9.25 6.83579 9.58579 6.5 10 6.5ZM10 2C14.4183 2 18 5.58172 18 10C18 11.9391 17.3098 13.7168 16.1621 15.1016L20.7803 19.7197C21.0731 20.0126 21.0731 20.4874 20.7803 20.7803C20.4874 21.0732 20.0126 21.0732 19.7197 20.7803L15.1016 16.1621C13.7168 17.3098 11.9391 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5Z" 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/zoom_in_24_regular.svg";

Details

Keywords

zoominzoomoutmagnifyingglasssearch