Thumb Like Dislike icon
Used in general approval/disapproval scenarios. The Thumb Like Dislike 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 Thumb Like Dislike 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 { ThumbLikeDislike24Regular, ThumbLikeDislike24Filled } from "@fluentui/react-icons";
export function Example() {
return <ThumbLikeDislike24Regular aria-label="Thumb Like Dislike" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_thumb_like_dislike_24_regular.svg" width="24" height="24" alt="Thumb Like Dislike"> 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="M6.04026 3.1769C6.30509 2.56122 7.10395 1.77224 8.21961 2.06173C8.91992 2.24344 9.424 2.66278 9.70865 3.23934C9.95661 3.7416 9.9998 4.28984 10.0084 4.70572C10.0165 5.10251 9.95273 5.53394 9.87107 5.91977H10.065C11.6225 5.91977 12.8871 7.35242 12.397 8.91082L11.2478 12.5647C10.7816 14.047 9.14781 14.8148 7.66956 14.3813L3.1579 13.0582C2.45717 12.8527 1.87433 12.3504 1.60095 11.6711L1.16292 10.5827C0.724195 9.49258 1.20342 8.29659 2.21789 7.73782L3.76023 6.8883C3.76769 6.88279 3.77767 6.87522 3.78999 6.86546C3.84101 6.82507 3.93296 6.74661 4.05294 6.62027C4.29193 6.3686 4.64871 5.92005 5.01534 5.19163C5.1926 4.83944 5.34186 4.56235 5.47364 4.3177L5.47459 4.31593C5.68736 3.92094 5.85164 3.61539 6.04026 3.1769ZM4.48997 8.19885L2.94157 9.0517C2.54664 9.26923 2.41763 9.6827 2.55446 10.0227L2.99249 11.1111C3.0837 11.3378 3.29179 11.5343 3.58 11.6188L8.09167 12.9419C8.86215 13.1678 9.61901 12.7439 9.81689 12.1147L10.9661 8.4608C11.1095 8.00468 10.7564 7.41977 10.065 7.41977H8.89834C8.65987 7.41977 8.43561 7.30636 8.29427 7.11429C8.15293 6.92222 8.11135 6.67438 8.18228 6.4467C8.23422 6.27999 8.28717 6.09532 8.33492 5.90502C8.44111 5.48186 8.51525 5.05526 8.50868 4.73661C8.50114 4.37052 8.45983 4.09823 8.36364 3.90338C8.27905 3.73205 8.13708 3.58999 7.84287 3.51365C7.75037 3.48964 7.67931 3.50584 7.60756 3.55082C7.52056 3.60535 7.45013 3.69535 7.41819 3.76961C7.20227 4.27157 7.01085 4.62692 6.79878 5.02063L6.79519 5.02729C6.66348 5.27179 6.52266 5.53329 6.3552 5.866C5.92286 6.72498 5.4813 7.29445 5.14064 7.65318C4.97048 7.83236 4.82597 7.95847 4.72103 8.04155C4.66857 8.08308 4.62603 8.11382 4.59516 8.13505L4.58896 8.13927L4.57537 8.14842L4.56293 8.15662L4.55528 8.16154L4.55369 8.16255C4.53283 8.1758 4.51157 8.18789 4.48997 8.19885ZM17.9597 20.8231C17.6949 21.4388 16.896 22.2278 15.7804 21.9383C15.0801 21.7566 14.576 21.3372 14.2914 20.7607C14.0434 20.2584 14.0002 19.7102 13.9916 19.2943C13.9835 18.8975 14.0473 18.4661 14.1289 18.0802H13.935C12.3775 18.0802 11.1129 16.6476 11.603 15.0892L12.7522 11.4353C13.2184 9.953 14.8522 9.18525 16.3304 9.61874L20.8421 10.9418C21.5428 11.1473 22.1257 11.6496 22.399 12.3289L22.8371 13.4173C23.2758 14.5074 22.7966 15.7034 21.7821 16.2622L20.2398 17.1117C20.2323 17.1172 20.2223 17.1248 20.21 17.1345C20.159 17.1749 20.067 17.2534 19.9471 17.3797C19.7081 17.6314 19.3513 18.0799 18.9847 18.8084C18.8074 19.1606 18.6581 19.4377 18.5264 19.6823L18.5254 19.6841C18.3126 20.0791 18.1484 20.3846 17.9597 20.8231ZM19.51 15.8012L21.0584 14.9483C21.4534 14.7308 21.5824 14.3173 21.4455 13.9773L21.0075 12.8889C20.9163 12.6622 20.7082 12.4657 20.42 12.3812L15.9083 11.0581C15.1378 10.8322 14.381 11.2561 14.1831 11.8853L13.0339 15.5392C12.8905 15.9953 13.2436 16.5802 13.935 16.5802H15.1017C15.3401 16.5802 15.5644 16.6936 15.7057 16.8857C15.8471 17.0778 15.8886 17.3256 15.8177 17.5533C15.7658 17.72 15.7128 17.9047 15.6651 18.095C15.5589 18.5181 15.4848 18.9447 15.4913 19.2634C15.4989 19.6295 15.5402 19.9018 15.6364 20.0966C15.7209 20.2679 15.8629 20.41 16.1571 20.4864C16.2496 20.5104 16.3207 20.4942 16.3924 20.4492C16.4794 20.3946 16.5499 20.3046 16.5818 20.2304C16.7977 19.7284 16.9891 19.3731 17.2012 18.9794L17.2048 18.9727C17.3365 18.7282 17.4773 18.4667 17.6448 18.134C18.0771 17.275 18.5187 16.7056 18.8594 16.3468C19.0295 16.1676 19.174 16.0415 19.279 15.9585C19.3314 15.9169 19.374 15.8862 19.4048 15.8649L19.411 15.8607L19.4246 15.8516L19.4371 15.8434L19.4447 15.8385L19.4463 15.8375C19.4672 15.8242 19.4884 15.8121 19.51 15.8012Z" 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/thumb_like_dislike_24_regular.svg";Details
| Name | Thumb Like Dislike |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_thumb_like_dislike_24_regular.svg |
| Filled file | ic_fluent_thumb_like_dislike_24_filled.svg |
| React components | ThumbLikeDislike24Regular, ThumbLikeDislike24Filled |
| License | MIT (© Microsoft Corporation) |