Presence Offline icon
These do not represent the guidelines and quality of the Fluent System iconography. They are included as a way to make it easier for products to pull in without needed a second process. The Presence Offline icon is part of Microsoft's Fluent UI System Icons, available here in the regular (outlined) style 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.
Regular (outlined)
Use the Presence Offline 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 { PresenceOffline24Regular } from "@fluentui/react-icons";
export function Example() {
return <PresenceOffline24Regular aria-label="Presence Offline" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_presence_offline_24_regular.svg" width="24" height="24" alt="Presence Offline"> 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="M16.0607 7.93934C16.6464 8.52513 16.6464 9.47487 16.0607 10.0607L14.1213 12L16.0607 13.9394C16.6464 14.5252 16.6464 15.4749 16.0607 16.0607C15.4749 16.6465 14.5251 16.6465 13.9393 16.0607L12 14.1214L10.0607 16.0607C9.47487 16.6464 8.52513 16.6464 7.93934 16.0607C7.35355 15.4749 7.35355 14.5251 7.93934 13.9393L9.87865 12L7.93934 10.0607C7.35355 9.47493 7.35355 8.52519 7.93934 7.9394C8.52513 7.35361 9.47487 7.35361 10.0607 7.9394L12 9.87871L13.9393 7.93934C14.5251 7.35355 15.4749 7.35355 16.0607 7.93934ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" 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/presence_offline_24_regular.svg";Details
| Name | Presence Offline |
|---|---|
| Styles | Regular (outlined) |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_presence_offline_24_regular.svg |
| React components | PresenceOffline24Regular |
| License | MIT (© Microsoft Corporation) |