Chess icon

Use the Chess 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 { Chess24Regular, Chess24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M7.5 6C9.433 6 11 7.567 11 9.5C11 9.87612 10.9362 10.2373 10.8262 10.5771C11.7893 10.8319 12.5 11.7068 12.5 12.75C12.5 13.9926 11.4926 15 10.25 15H10.1289C10.5078 16.7902 11.6286 17.9966 12.2676 18.5576C12.6853 18.9244 13 19.4757 13 20.1104L12.9902 20.3037C12.8997 21.1929 12.1929 21.8997 11.3037 21.9902L11.1104 22H3.88965C2.91145 21.9998 2.10672 21.2564 2.00977 20.3037L2 20.1104C2 19.4757 2.31468 18.9244 2.73242 18.5576C3.37143 17.9966 4.49222 16.7902 4.87109 15H4.75C3.50736 15 2.5 13.9926 2.5 12.75C2.5 11.7071 3.21016 10.8322 4.17285 10.5771C4.06284 10.2374 4 9.87602 4 9.5C4 7.567 5.567 6 7.5 6ZM13.7295 2C14.2735 2 14.7725 2.19435 15.1621 2.5166C15.5167 2.19661 15.9848 2 16.5 2C17.015 2 17.4824 2.1969 17.8369 2.5166C18.2266 2.19406 18.7262 2 19.2705 2H19.5L19.6533 2.00781C20.4097 2.08461 21 2.72334 21 3.5V6.75C21 8.07839 20.058 9.18634 18.8057 9.44336C19.1436 14.631 20.9608 17.753 21.6064 18.7119C21.8424 19.0626 22 19.4921 22 19.959L21.9893 20.168C21.8914 21.1282 21.1282 21.8914 20.168 21.9893L19.959 22H13.293C13.6518 21.5859 13.8937 21.0699 13.9707 20.5H19.959L20.0674 20.4893C20.2791 20.4461 20.4461 20.2791 20.4893 20.0674L20.5 19.959C20.5 19.8331 20.4572 19.6909 20.3623 19.5498C19.5676 18.3695 17.4898 14.7358 17.2705 8.77734C17.2631 8.57387 17.3382 8.3761 17.4795 8.22949C17.6209 8.08283 17.8158 8 18.0195 8H18.25C18.9404 8 19.5 7.44036 19.5 6.75V3.5H19.2705C18.8622 3.5 18.529 3.82658 18.5205 4.23438L18.5 5.26465C18.4918 5.67587 18.1535 6.00409 17.7422 6C17.3311 5.99572 17 5.66119 17 5.25V4C17 3.72386 16.7761 3.5 16.5 3.5C16.2239 3.5 16 3.72386 16 4V5.25L15.9961 5.32617C15.9582 5.70172 15.6432 5.99599 15.2578 6C14.8465 6.00409 14.5082 5.67587 14.5 5.26465L14.4795 4.23438C14.471 3.82658 14.1379 3.5 13.7295 3.5H13.5V6.75C13.5 7.44036 14.0596 8 14.75 8H14.9805C15.1842 8 15.3791 8.08283 15.5205 8.22949C15.6618 8.3761 15.7369 8.57387 15.7295 8.77734C15.5623 13.3201 14.3135 16.5108 13.3779 18.2939C13.2406 18.1119 13.0882 17.9483 12.9268 17.8066C12.7394 17.6421 12.5121 17.419 12.2793 17.1406C13.0444 15.5549 13.963 12.9793 14.1934 9.44336C12.9415 9.18598 12 8.07806 12 6.75V3.5C12 2.67157 12.6716 2 13.5 2H13.7295ZM7.5 7.5C6.39543 7.5 5.5 8.39543 5.5 9.5C5.5 9.98402 5.67107 10.4263 5.95703 10.7725C6.14191 10.9963 6.18121 11.3067 6.05762 11.5693C5.93386 11.8321 5.66933 12 5.37891 12H4.75C4.33579 12 4 12.3358 4 12.75C4 13.1642 4.33579 13.5 4.75 13.5H5.73242C5.94069 13.5 6.13937 13.5868 6.28125 13.7393C6.42303 13.8917 6.49538 14.0961 6.48047 14.3037C6.27731 17.1086 4.5827 18.9295 3.72266 19.6846C3.56767 19.8206 3.5 19.9829 3.5 20.1104L3.50781 20.1885C3.54408 20.3662 3.70127 20.4999 3.88965 20.5H11.1104L11.1885 20.4922C11.3409 20.4611 11.4611 20.3409 11.4922 20.1885L11.5 20.1104C11.5 19.9829 11.4323 19.8206 11.2773 19.6846C10.4173 18.9295 8.72269 17.1086 8.51953 14.3037C8.50462 14.0961 8.57697 13.8917 8.71875 13.7393C8.86063 13.5868 9.05931 13.5 9.26758 13.5H10.25L10.3271 13.4961C10.7051 13.4575 11 13.1382 11 12.75C11 12.3358 10.6642 12 10.25 12H9.62109C9.33067 12 9.06614 11.8321 8.94238 11.5693C8.81879 11.3067 8.85809 10.9963 9.04297 10.7725C9.32893 10.4263 9.5 9.98402 9.5 9.5C9.5 8.39543 8.60457 7.5 7.5 7.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/chess_24_regular.svg";

Details

Keywords

pawnrookpiecesplayersboardgamegamestrategy