Sticker icon
Used to represent sticker collections in UI. The Sticker 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 Sticker 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 { Sticker24Regular, Sticker24Filled } from "@fluentui/react-icons";
export function Example() {
return <Sticker24Regular aria-label="Sticker" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_sticker_24_regular.svg" width="24" height="24" alt="Sticker"> 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.75 3C19.5449 3 21 4.45507 21 6.25V13.1287C21 13.7254 20.7629 14.2977 20.341 14.7197L14.7197 20.341C14.2977 20.7629 13.7254 21 13.1287 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H13L13.0009 16.4365C12.7798 16.4695 12.555 16.4914 12.3268 16.502L12.0009 16.5096C10.6524 16.5096 9.41985 16.1277 8.32333 15.3693C7.98266 15.1337 7.89751 14.6665 8.13314 14.3259C8.36876 13.9852 8.83594 13.9 9.1766 14.1357C10.0214 14.72 10.9562 15.0096 12.0009 15.0096C12.4632 15.0096 12.904 14.9529 13.325 14.839C13.8209 13.8102 14.8412 13.0847 16.0382 13.0069L16.2512 13H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5ZM18.439 14.5H16.2514C15.3332 14.5003 14.58 15.2074 14.5066 16.1066L14.5007 16.2501L14.5 18.439L18.439 14.5ZM9.00045 7.75116C9.69041 7.75116 10.2497 8.31048 10.2497 9.00045C10.2497 9.69041 9.69041 10.2497 9.00045 10.2497C8.31048 10.2497 7.75116 9.69041 7.75116 9.00045C7.75116 8.31048 8.31048 7.75116 9.00045 7.75116ZM15.0004 7.75116C15.6904 7.75116 16.2497 8.31048 16.2497 9.00045C16.2497 9.69041 15.6904 10.2497 15.0004 10.2497C14.3105 10.2497 13.7512 9.69041 13.7512 9.00045C13.7512 8.31048 14.3105 7.75116 15.0004 7.75116Z" 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/sticker_24_regular.svg";Details
| Name | Sticker |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_sticker_24_regular.svg |
| Filled file | ic_fluent_sticker_24_filled.svg |
| React components | Sticker24Regular, Sticker24Filled |
| License | MIT (© Microsoft Corporation) |