Gift Open icon

Use the Gift Open 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 { GiftOpen24Regular, GiftOpen24Filled } from "@fluentui/react-icons";

export function Example() {
  return <GiftOpen24Regular aria-label="Gift Open" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_gift_open_24_regular.svg" width="24" height="24" alt="Gift Open">

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.0001 4C16.5524 4 17.0001 3.55228 17.0001 3C17.0001 2.44772 16.5524 2 16.0001 2C15.4478 2 15.0001 2.44772 15.0001 3C15.0001 3.55228 15.4478 4 16.0001 4ZM8.00008 9.5C8.00008 7.84315 9.34322 6.5 11.0001 6.5C13.0711 6.5 14.7501 8.17893 14.7501 10.25C14.7501 12.7353 12.7354 14.75 10.2501 14.75C9.83587 14.75 9.50008 15.0858 9.50008 15.5C9.50008 15.9142 9.83587 16.25 10.2501 16.25C13.5638 16.25 16.2501 13.5637 16.2501 10.25C16.2501 7.3505 13.8996 5 11.0001 5C8.5148 5 6.50008 7.01472 6.50008 9.5C6.50008 11.5711 8.17901 13.25 10.2501 13.25C11.9069 13.25 13.2501 11.9069 13.2501 10.25C13.2501 9.00736 12.2427 8 11.0001 8C10.1717 8 9.50008 8.67157 9.50008 9.5C9.50008 9.91421 9.83587 10.25 10.2501 10.25C10.6643 10.25 11.0001 9.91421 11.0001 9.5C11.4143 9.5 11.7501 9.83579 11.7501 10.25C11.7501 11.0784 11.0785 11.75 10.2501 11.75C9.00744 11.75 8.00008 10.7426 8.00008 9.5ZM19.5001 4.25C19.9143 4.25 20.2501 4.58579 20.2501 5V5.75H21.0001C21.4143 5.75 21.7501 6.08579 21.7501 6.5C21.7501 6.91421 21.4143 7.25 21.0001 7.25H20.2501V8C20.2501 8.41421 19.9143 8.75 19.5001 8.75C19.0859 8.75 18.7501 8.41421 18.7501 8V7.25H18.0001C17.5859 7.25 17.2501 6.91421 17.2501 6.5C17.2501 6.08579 17.5859 5.75 18.0001 5.75H18.7501V5C18.7501 4.58579 19.0859 4.25 19.5001 4.25ZM5.50008 12.75C5.50008 12.4734 5.34784 12.2193 5.10397 12.0887C4.8601 11.9582 4.5642 11.9725 4.33405 12.126L1.33405 14.126C0.989408 14.3557 0.896278 14.8214 1.12604 15.166C1.35581 15.5107 1.82146 15.6038 2.1661 15.374L4.00008 14.1514V18.75C4.00008 20.5449 5.45515 22 7.25008 22H16.7501C18.545 22 20.0001 20.5449 20.0001 18.75V14.1514L21.8341 15.374C22.1787 15.6038 22.6444 15.5107 22.8741 15.166C23.1039 14.8214 23.0107 14.3557 22.6661 14.126L19.6661 12.126C19.436 11.9725 19.1401 11.9582 18.8962 12.0887C18.6523 12.2193 18.5001 12.4734 18.5001 12.75V18.75C18.5001 19.7165 17.7166 20.5 16.7501 20.5H7.25008C6.28358 20.5 5.50008 19.7165 5.50008 18.75V12.75Z" 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/gift_open_24_regular.svg";

Details

Keywords

presentgiftopenaccesssparkleswirlboxpackage