Premium icon
Used specifically for premium upsell of M365, and more generally premium experiences and quality. The Premium 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 Premium 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 { Premium24Regular, Premium24Filled } from "@fluentui/react-icons";
export function Example() {
return <Premium24Regular aria-label="Premium" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_premium_24_regular.svg" width="24" height="24" alt="Premium"> 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="M17.9989 3C18.2398 3 18.4638 3.11546 18.6038 3.30649L18.6585 3.39288L21.922 9.42119L21.9599 9.51408L21.972 9.5539L21.9921 9.65608L21.9979 9.75C21.9979 9.81904 21.9886 9.88589 21.9711 9.94938L21.9237 10.0754L21.8862 10.144C21.8641 10.1796 21.839 10.2136 21.8107 10.2457L21.8705 10.1683L21.846 10.2025L12.5962 20.7081C12.5161 20.8144 12.4128 20.8917 12.2989 20.94L12.2007 20.973L12.1235 20.9904L11.9993 21.0003L11.899 20.9937L11.7811 20.9682C11.7209 20.9509 11.6623 20.9254 11.6075 20.8922L11.5983 20.8847C11.5512 20.8564 11.5072 20.8218 11.4672 20.7815L2.17809 10.2352L2.15185 10.2025L2.11178 10.144C2.0563 10.0544 2.01921 9.9523 2.00569 9.84286L2 9.75L2.00285 9.68414L2.01606 9.59539C2.02225 9.56547 2.03015 9.53671 2.03966 9.5087L2.06248 9.45021L2.09048 9.39288L5.33943 3.39288C5.45413 3.18107 5.66229 3.03913 5.89695 3.00695L5.99895 3H17.9989ZM14.997 10.5H8.998L11.9989 18.187L14.997 10.5ZM7.389 10.5H4.409L9.76 16.574L7.389 10.5ZM19.587 10.5H16.608L14.24 16.57L19.587 10.5ZM8.971 4.5H6.44495L4.007 9H7.531L8.971 4.5ZM13.4509 4.5H10.5459L9.105 9H14.89L13.4509 4.5ZM17.5519 4.5H15.026L16.466 9H19.988L17.5519 4.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/premium_24_regular.svg";Details
| Name | Premium |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_premium_24_regular.svg |
| Filled file | ic_fluent_premium_24_filled.svg |
| React components | Premium24Regular, Premium24Filled |
| License | MIT (© Microsoft Corporation) |