Open Off icon
Used in general opening app actions. The Open Off 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 Open Off 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 { OpenOff24Regular, OpenOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <OpenOff24Regular aria-label="Open Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_open_off_24_regular.svg" width="24" height="24" alt="Open Off"> 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="M3.28034 2.21968L21.7801 20.7198C22.073 21.0127 22.073 21.4876 21.7801 21.7805C21.4872 22.0734 21.0123 22.0734 20.7194 21.7805L19.4557 20.5167C18.9598 20.8232 18.3754 21 17.7496 21H6.24992C4.45504 21 3 19.5449 3 17.75V6.25C3 5.62426 3.17684 5.03983 3.48326 4.54394L2.21966 3.28032C1.92677 2.98743 1.92678 2.51255 2.21968 2.21966C2.51257 1.92677 2.98745 1.92678 3.28034 2.21968ZM18.3377 19.3987L4.60122 5.66193C4.53566 5.84572 4.49996 6.04369 4.49996 6.25V17.75C4.49996 18.7165 5.28344 19.5 6.24992 19.5H17.7496C17.956 19.5 18.1539 19.4643 18.3377 19.3987ZM13.0847 9.90286L14.0969 10.9151C14.1628 10.8806 14.2247 10.8357 14.28 10.7804L19.5 5.56075V10.25C19.5 10.6642 19.8358 11 20.25 11C20.6642 11 21 10.6642 21 10.25V3.75C21 3.33579 20.6642 3 20.25 3H13.7497C13.3355 3 12.9998 3.33579 12.9998 3.75C12.9998 4.16421 13.3355 4.5 13.7497 4.5H18.4395L13.2194 9.71964C13.1641 9.77503 13.1191 9.83692 13.0847 9.90286ZM20.9989 17.8172L19.4996 16.3179V13.75C19.4996 13.3358 19.8354 13 20.2496 13C20.6638 13 20.9995 13.3358 20.9995 13.75V17.75C20.9995 17.7725 20.9993 17.7949 20.9989 17.8172ZM6.18265 3.00068L7.68194 4.5H10.2498C10.664 4.5 10.9998 4.16421 10.9998 3.75C10.9998 3.33579 10.664 3 10.2498 3H6.24992C6.22744 3 6.20502 3.00023 6.18265 3.00068Z" 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/open_off_24_regular.svg";Details
| Name | Open Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_open_off_24_regular.svg |
| Filled file | ic_fluent_open_off_24_filled.svg |
| React components | OpenOff24Regular, OpenOff24Filled |
| License | MIT (© Microsoft Corporation) |