Folder Search icon
Used to represent collections of files. The Folder 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 Folder 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 { FolderSearch24Regular, FolderSearch24Filled } from "@fluentui/react-icons";
export function Example() {
return <FolderSearch24Regular aria-label="Folder Search" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_folder_search_24_regular.svg" width="24" height="24" alt="Folder 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="M5.25 3C3.45507 3 2 4.45507 2 6.25V17.75C2 19.5449 3.45507 21 5.25 21H16.5H17V20.9776C16.8353 20.9924 16.6685 21 16.5 21C15.0385 21 13.7101 20.4299 12.7251 19.5H5.25C4.2835 19.5 3.5 18.7165 3.5 17.75V9.5H8.12868C8.72542 9.5 9.29771 9.26295 9.71967 8.84099L11.5607 7H18.75C19.7165 7 20.5 7.7835 20.5 8.75V11.7251C21.3227 12.5965 21.8637 13.7366 21.9776 15H22V8.75C22 6.95507 20.5449 5.5 18.75 5.5H11.5607L9.71967 3.65901C9.29771 3.23705 8.72542 3 8.12868 3H5.25ZM3.5 8V6.25C3.5 5.2835 4.2835 4.5 5.25 4.5H8.12868C8.32759 4.5 8.51836 4.57902 8.65901 4.71967L10.1893 6.25L8.65901 7.78033C8.51836 7.92098 8.32759 8 8.12868 8H3.5ZM16.5 20C17.4719 20 18.3718 19.6919 19.1074 19.1681L21.7197 21.7803C22.0126 22.0732 22.4874 22.0732 22.7803 21.7803C23.0732 21.4874 23.0732 21.0126 22.7803 20.7197L20.1681 18.1074C20.6919 17.3718 21 16.4719 21 15.5C21 13.0147 18.9853 11 16.5 11C14.0147 11 12 13.0147 12 15.5C12 17.9853 14.0147 20 16.5 20ZM16.5 18.5C14.8431 18.5 13.5 17.1569 13.5 15.5C13.5 13.8431 14.8431 12.5 16.5 12.5C18.1569 12.5 19.5 13.8431 19.5 15.5C19.5 17.1569 18.1569 18.5 16.5 18.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/folder_search_24_regular.svg";Details
| Name | Folder Search |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_folder_search_24_regular.svg |
| Filled file | ic_fluent_folder_search_24_filled.svg |
| React components | FolderSearch24Regular, FolderSearch24Filled |
| License | MIT (© Microsoft Corporation) |