chess icon

chess from Material Symbols Light by Google · Regular · Social · Apache-2.0 Free for personal and commercial use.

Name: chess
Set: Material Symbols Light
Style: Regular
Category: Social
Viewbox: 24×24
License: Apache 2.0

5 other variants in Material Symbols Light

chess-outline chess-outline-rounded chess-outline-sharp chess-rounded chess-sharp

The same icon in other sets

chessAkar Icons chessBoxIcons v2 Solid chessFont Awesome 6 Solid chessFont Awesome Solid chess-16-filledFluent UI System Icons chessIconPark chessIconPark Outline chessLine Awesome chessMaterial Icon Theme chessMaterial Symbols chess-fillMingCute Icon chessPixelarticons chess-fillRemix Icon chessTabler Icons

More social icons from Material Symbols Light

Use the chess icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.77 20.23v-2.326q0-.671.471-1.143q.473-.472 1.144-.472h1.069l.685-4.789h-2.37v-1h12.462v1h-2.37l.685 4.789h1.07q.67 0 1.143.471q.472.473.472 1.144v2.327zM7.911 9.616L6.615 3.77q.71.452 1.325.704q.616.252 1.358.252q.827 0 1.501-.272T12 3.75q.527.43 1.201.703t1.482.272q.684 0 1.28-.242q.597-.243 1.44-.714l-1.309 5.847z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightChess(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.77 20.23v-2.326q0-.671.471-1.143q.473-.472 1.144-.472h1.069l.685-4.789h-2.37v-1h12.462v1h-2.37l.685 4.789h1.07q.67 0 1.143.471q.472.473.472 1.144v2.327zM7.911 9.616L6.615 3.77q.71.452 1.325.704q.616.252 1.358.252q.827 0 1.501-.272T12 3.75q.527.43 1.201.703t1.482.272q.684 0 1.28-.242q.597-.243 1.44-.714l-1.309 5.847z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.77 20.23v-2.326q0-.671.471-1.143q.473-.472 1.144-.472h1.069l.685-4.789h-2.37v-1h12.462v1h-2.37l.685 4.789h1.07q.67 0 1.143.471q.472.473.472 1.144v2.327zM7.911 9.616L6.615 3.77q.71.452 1.325.704q.616.252 1.358.252q.827 0 1.501-.272T12 3.75q.527.43 1.201.703t1.482.272q.684 0 1.28-.242q.597-.243 1.44-.714l-1.309 5.847z"/></svg>
</template>

CSS

.icon-chess {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.77%2020.23v-2.326q0-.671.471-1.143q.473-.472%201.144-.472h1.069l.685-4.789h-2.37v-1h12.462v1h-2.37l.685%204.789h1.07q.67%200%201.143.471q.472.473.472%201.144v2.327zM7.911%209.616L6.615%203.77q.71.452%201.325.704q.616.252%201.358.252q.827%200%201.501-.272T12%203.75q.527.43%201.201.703t1.482.272q.684%200%201.28-.242q.597-.243%201.44-.714l-1.309%205.847z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.77%2020.23v-2.326q0-.671.471-1.143q.473-.472%201.144-.472h1.069l.685-4.789h-2.37v-1h12.462v1h-2.37l.685%204.789h1.07q.67%200%201.143.471q.472.473.472%201.144v2.327zM7.911%209.616L6.615%203.77q.71.452%201.325.704q.616.252%201.358.252q.827%200%201.501-.272T12%203.75q.527.43%201.201.703t1.482.272q.684%200%201.28-.242q.597-.243%201.44-.714l-1.309%205.847z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/chess.svg?color=%231a73e8&size=48