Pin Off icon
Used to represent saving content for easy finding, whether it be channels, chats, mail, files, etc. The Pin 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 Pin 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 { PinOff24Regular, PinOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <PinOff24Regular aria-label="Pin Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_pin_off_24_regular.svg" width="24" height="24" alt="Pin 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.28035 2.21967C2.98746 1.92678 2.51258 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98742 2.21967 3.28032L8.12461 9.18526L4.81064 10.3301C3.93794 10.6315 3.68202 11.7426 4.3349 12.3954L7.43942 15.4999L3.00009 19.9392L3.00001 20.9999H4.06077L8.50009 16.5605L11.6046 19.665C12.2575 20.3179 13.3686 20.062 13.67 19.1893L14.8148 15.8755L20.7196 21.7803C21.0125 22.0732 21.4874 22.0732 21.7803 21.7803C22.0732 21.4874 22.0732 21.0126 21.7803 20.7197L3.28035 2.21967ZM13.6353 14.696L12.3827 18.3218L5.67816 11.6174L9.30412 10.3648L13.6353 14.696ZM19.6829 10.8201L15.8957 12.7137L17.0137 13.8317L20.3537 12.1617C22.0326 11.3223 22.3957 9.08476 21.0684 7.75751L16.2426 2.93179C14.9153 1.60453 12.6778 1.96763 11.8383 3.6465L10.1684 6.98637L11.2864 8.10441L13.18 4.31731C13.5616 3.55419 14.5786 3.38914 15.1819 3.99244L20.0078 8.81817C20.6111 9.42146 20.446 10.4385 19.6829 10.8201Z" 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/pin_off_24_regular.svg";Details
| Name | Pin Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_pin_off_24_regular.svg |
| Filled file | ic_fluent_pin_off_24_filled.svg |
| React components | PinOff24Regular, PinOff24Filled |
| License | MIT (© Microsoft Corporation) |