Emoji Edit icon
Used in emoji picker & some simple voting scenarios. Should not be used as emoji. The Emoji Edit 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 Emoji Edit 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 { EmojiEdit24Regular, EmojiEdit24Filled } from "@fluentui/react-icons";
export function Example() {
return <EmojiEdit24Regular aria-label="Emoji Edit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_emoji_edit_24_regular.svg" width="24" height="24" alt="Emoji Edit"> 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="M11.9996 1.99805C17.2706 1.99805 21.5892 6.07548 21.9734 11.2483C21.4866 11.0469 20.9613 10.9676 20.4442 11.0103C19.9541 6.7811 16.3602 3.49805 11.9996 3.49805C7.30432 3.49805 3.49805 7.30432 3.49805 11.9996C3.49805 16.4582 6.93029 20.1152 11.2968 20.4725L11.0632 21.4066C11.017 21.5914 10.9967 21.7741 10.9992 21.9517C5.94523 21.4498 1.99805 17.1857 1.99805 11.9996C1.99805 6.47589 6.47589 1.99805 11.9996 1.99805ZM11.9996 16.5012C13.1207 16.5012 14.173 16.0893 14.9838 15.3703L12.4903 17.8639C12.4492 17.905 12.4091 17.947 12.3701 17.9898C12.2473 17.9974 12.1237 18.0012 11.9996 18.0012C10.1369 18.0012 8.41371 17.1462 7.28311 15.7112C7.02676 15.3859 7.08271 14.9143 7.40806 14.658C7.73342 14.4016 8.20499 14.4576 8.46134 14.7829C9.31047 15.8606 10.6015 16.5012 11.9996 16.5012ZM9.00005 8.75024C9.69001 8.75024 10.2493 9.30956 10.2493 9.99953C10.2493 10.6895 9.69001 11.2488 9.00005 11.2488C8.31008 11.2488 7.75076 10.6895 7.75076 9.99953C7.75076 9.30956 8.31008 8.75024 9.00005 8.75024ZM15 8.75024C15.69 8.75024 16.2493 9.30956 16.2493 9.99953C16.2493 10.6895 15.69 11.2488 15 11.2488C14.3101 11.2488 13.7508 10.6895 13.7508 9.99953C13.7508 9.30956 14.3101 8.75024 15 8.75024ZM19.0999 12.6685L13.1974 18.571C12.8533 18.9151 12.6092 19.3463 12.4911 19.8184L12.0334 21.6492C11.8344 22.4453 12.5556 23.1664 13.3517 22.9674L15.1824 22.5097C15.6545 22.3917 16.0857 22.1475 16.4299 21.8034L22.3323 15.901C23.2249 15.0084 23.2249 13.5612 22.3323 12.6685C21.4397 11.7759 19.9925 11.7759 19.0999 12.6685Z" 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/emoji_edit_24_regular.svg";Details
| Name | Emoji Edit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_emoji_edit_24_regular.svg |
| Filled file | ic_fluent_emoji_edit_24_filled.svg |
| React components | EmojiEdit24Regular, EmojiEdit24Filled |
| License | MIT (© Microsoft Corporation) |