VIP icon

Use the VIP 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 { Vip24Regular, Vip24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Vip24Regular aria-label="VIP" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_vip_24_regular.svg" width="24" height="24" alt="VIP">

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="M18.75 4C20.5449 4 22 5.45507 22 7.25V16.75C22 18.5449 20.5449 20 18.75 20H5.25C3.45507 20 2 18.5449 2 16.75V7.25C2 5.45507 3.45507 4 5.25 4H18.75ZM5.25 5.5C4.2835 5.5 3.5 6.2835 3.5 7.25V16.75C3.5 17.7165 4.2835 18.5 5.25 18.5H18.75C19.7165 18.5 20.5 17.7165 20.5 16.75V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5H5.25ZM9.04492 8.99414C9.18642 8.60502 9.61671 8.4037 10.0059 8.54492C10.395 8.68642 10.5963 9.11671 10.4551 9.50586L8.54004 14.7715C8.38092 15.2088 7.9654 15.5 7.5 15.5C7.0346 15.5 6.61908 15.2088 6.45996 14.7715L4.54492 9.50586C4.4037 9.11671 4.60502 8.68642 4.99414 8.54492C5.38329 8.4037 5.81358 8.60502 5.95508 8.99414L7.5 13.2432L9.04492 8.99414ZM12.25 8.5C12.6642 8.5 13 8.83579 13 9.25V14.75C13 15.1642 12.6642 15.5 12.25 15.5C11.8358 15.5 11.5 15.1642 11.5 14.75V9.25C11.5 8.83579 11.8358 8.5 12.25 8.5ZM17.25 8.5C18.4926 8.5 19.5 9.50736 19.5 10.75C19.5 11.9926 18.4926 13 17.25 13H16V14.75C16 15.1642 15.6642 15.5 15.25 15.5C14.8358 15.5 14.5 15.1642 14.5 14.75V9.25C14.5 9.05109 14.5791 8.86038 14.7197 8.71973C14.8604 8.57907 15.0511 8.5 15.25 8.5H17.25ZM16 11.5H17.25C17.6642 11.5 18 11.1642 18 10.75C18 10.3358 17.6642 10 17.25 10H16V11.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/vip_24_regular.svg";

Details