square hint icon

square-hint-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.

Name: square-hint-24-filled
Set: Fluent UI System Icons
Style: 24 Filled
Viewbox: 24×24
License: MIT

11 other variants in Fluent UI System Icons

square-hint-16-filled square-hint-16-regular square-hint-20-filled square-hint-20-regular square-hint-24-regular square-hint-28-filled square-hint-28-regular square-hint-32-filled square-hint-32-regular square-hint-48-filled square-hint-48-regular

Related icons in Fluent UI System Icons

square-add-16-filled square-arrow-forward-16-filled square-dismiss-16-filled square-dovetail-joint-12-filled square-eraser-20-filled square-hint-apps-20-filled square-hint-arrow-back-16-filled square-hint-hexagon-12-filled square-hint-sparkles-16-filled square-multiple-16-filled square-shadow-12-filled square-text-arrow-repeat-all-16-filled

Use the square hint icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7.5 1a1 1 0 1 1 0-2A3.5 3.5 0 0 1 21 6.5a1 1 0 1 1-2 0A1.5 1.5 0 0 0 17.5 5m-11-2a1 1 0 0 1 0 2A1.5 1.5 0 0 0 5 6.5a1 1 0 0 1-2 0A3.5 3.5 0 0 1 6.5 3M4 16.5a1 1 0 0 0-1 1A3.5 3.5 0 0 0 6.5 21a1 1 0 1 0 0-2A1.5 1.5 0 0 1 5 17.5a1 1 0 0 0-1-1m7 2.5a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm6.5 0a1 1 0 1 0 0 2a3.5 3.5 0 0 0 3.5-3.5a1 1 0 1 0-2 0a1.5 1.5 0 0 1-1.5 1.5m2.5-9a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1M3 13a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0z"/></svg>

React

import type { SVGProps } from "react";

export function FluentSquareHint24Filled(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="M10 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7.5 1a1 1 0 1 1 0-2A3.5 3.5 0 0 1 21 6.5a1 1 0 1 1-2 0A1.5 1.5 0 0 0 17.5 5m-11-2a1 1 0 0 1 0 2A1.5 1.5 0 0 0 5 6.5a1 1 0 0 1-2 0A3.5 3.5 0 0 1 6.5 3M4 16.5a1 1 0 0 0-1 1A3.5 3.5 0 0 0 6.5 21a1 1 0 1 0 0-2A1.5 1.5 0 0 1 5 17.5a1 1 0 0 0-1-1m7 2.5a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm6.5 0a1 1 0 1 0 0 2a3.5 3.5 0 0 0 3.5-3.5a1 1 0 1 0-2 0a1.5 1.5 0 0 1-1.5 1.5m2.5-9a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1M3 13a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7.5 1a1 1 0 1 1 0-2A3.5 3.5 0 0 1 21 6.5a1 1 0 1 1-2 0A1.5 1.5 0 0 0 17.5 5m-11-2a1 1 0 0 1 0 2A1.5 1.5 0 0 0 5 6.5a1 1 0 0 1-2 0A3.5 3.5 0 0 1 6.5 3M4 16.5a1 1 0 0 0-1 1A3.5 3.5 0 0 0 6.5 21a1 1 0 1 0 0-2A1.5 1.5 0 0 1 5 17.5a1 1 0 0 0-1-1m7 2.5a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm6.5 0a1 1 0 1 0 0 2a3.5 3.5 0 0 0 3.5-3.5a1 1 0 1 0-2 0a1.5 1.5 0 0 1-1.5 1.5m2.5-9a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1M3 13a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0z"/></svg>
</template>

CSS

.icon-square-hint-24-filled {
  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%22M10%204a1%201%200%200%201%201-1h2a1%201%200%201%201%200%202h-2a1%201%200%200%201-1-1m7.5%201a1%201%200%201%201%200-2A3.5%203.5%200%200%201%2021%206.5a1%201%200%201%201-2%200A1.5%201.5%200%200%200%2017.5%205m-11-2a1%201%200%200%201%200%202A1.5%201.5%200%200%200%205%206.5a1%201%200%200%201-2%200A3.5%203.5%200%200%201%206.5%203M4%2016.5a1%201%200%200%200-1%201A3.5%203.5%200%200%200%206.5%2021a1%201%200%201%200%200-2A1.5%201.5%200%200%201%205%2017.5a1%201%200%200%200-1-1m7%202.5a1%201%200%201%200%200%202h2a1%201%200%201%200%200-2zm6.5%200a1%201%200%201%200%200%202a3.5%203.5%200%200%200%203.5-3.5a1%201%200%201%200-2%200a1.5%201.5%200%200%201-1.5%201.5m2.5-9a1%201%200%200%201%201%201v2a1%201%200%201%201-2%200v-2a1%201%200%200%201%201-1M3%2013a1%201%200%201%200%202%200v-2a1%201%200%201%200-2%200z%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%22M10%204a1%201%200%200%201%201-1h2a1%201%200%201%201%200%202h-2a1%201%200%200%201-1-1m7.5%201a1%201%200%201%201%200-2A3.5%203.5%200%200%201%2021%206.5a1%201%200%201%201-2%200A1.5%201.5%200%200%200%2017.5%205m-11-2a1%201%200%200%201%200%202A1.5%201.5%200%200%200%205%206.5a1%201%200%200%201-2%200A3.5%203.5%200%200%201%206.5%203M4%2016.5a1%201%200%200%200-1%201A3.5%203.5%200%200%200%206.5%2021a1%201%200%201%200%200-2A1.5%201.5%200%200%201%205%2017.5a1%201%200%200%200-1-1m7%202.5a1%201%200%201%200%200%202h2a1%201%200%201%200%200-2zm6.5%200a1%201%200%201%200%200%202a3.5%203.5%200%200%200%203.5-3.5a1%201%200%201%200-2%200a1.5%201.5%200%200%201-1.5%201.5m2.5-9a1%201%200%200%201%201%201v2a1%201%200%201%201-2%200v-2a1%201%200%200%201%201-1M3%2013a1%201%200%201%200%202%200v-2a1%201%200%201%200-2%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/square-hint-24-filled.svg?color=%231a73e8&size=48