Color Off icon

Use the Color Off 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 { ColorOff24Regular, ColorOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ColorOff24Regular aria-label="Color Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_color_off_24_regular.svg" width="24" height="24" alt="Color Off">

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="M2.21967 2.21973C2.51256 1.92684 2.98732 1.92684 3.28021 2.21973L21.7802 20.7197C22.0729 21.0126 22.0729 21.4874 21.7802 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L18.7216 19.7822C16.7294 21.3655 14.1813 21.6021 12.1435 20.124C10.9662 19.2699 10.5096 18.199 10.289 16.46L10.1835 15.4717L10.1386 15.0752C10.016 14.1415 9.82757 13.7222 9.43451 13.5029C8.89902 13.2045 8.5418 13.1973 7.83881 13.4697L7.48725 13.6152L7.30853 13.6934C6.29492 14.1336 5.6204 14.2881 4.76752 14.1094L4.56732 14.0625L4.40424 14.0156C1.61528 13.1514 1.202 9.36903 3.83881 5.8584C3.97566 5.6762 4.11943 5.50011 4.26947 5.33008L2.21967 3.28028C1.92678 2.98738 1.92678 2.51262 2.21967 2.21973ZM5.33295 6.39356C5.23088 6.51195 5.13219 6.63345 5.03803 6.75879C2.96324 9.52113 3.21802 12.0382 4.82318 12.5742L4.94623 12.6113L5.08002 12.6416C5.51889 12.7284 5.89417 12.6565 6.51654 12.4004L7.11908 12.1426C8.32078 11.6499 9.10411 11.6018 10.164 12.1924C11.0815 12.7038 11.4396 13.4906 11.622 14.8525L11.6757 15.3115L11.7294 15.8438L11.7763 16.2656C11.9484 17.6269 12.2613 18.3567 13.0244 18.9102C14.4225 19.9243 16.19 19.8058 17.6562 18.7168L16.1005 17.1611C15.9553 17.2981 15.7776 17.4046 15.5712 17.46C14.9044 17.6386 14.2187 17.243 14.04 16.5762C13.924 16.143 14.051 15.7024 14.3369 15.3975L5.33295 6.39356ZM6.61029 3.42871C9.76102 1.61162 13.9703 1.48803 17.2031 3.49805C21.4825 6.15903 23.0562 11.2752 21.3036 16.0752C21.1206 16.5765 20.9011 17.0431 20.6572 17.4756L19.5488 16.3672C19.6738 16.1122 19.7911 15.8436 19.8945 15.5605C21.4104 11.4085 20.068 7.04681 16.4101 4.77246C13.7803 3.13742 10.3569 3.17374 7.71576 4.53418L6.61029 3.42871ZM17.4257 12.5381C18.0924 12.3596 18.7782 12.7552 18.957 13.4219C19.1314 14.0729 18.7574 14.7399 18.1191 14.9375L16.5566 13.375C16.6799 12.9795 16.996 12.6533 17.4257 12.5381ZM16.9316 9.04981C17.5982 8.8714 18.2832 9.26697 18.4619 9.9336C18.6404 10.6003 18.2447 11.2851 17.5781 11.4639C16.9113 11.6424 16.2265 11.2469 16.0478 10.5801C15.8693 9.91333 16.2648 9.22846 16.9316 9.04981ZM14.9531 6.04688C15.6197 5.86851 16.3046 6.26408 16.4833 6.93067C16.662 7.59743 16.2663 8.28315 15.5995 8.46192C14.933 8.64032 14.2481 8.24452 14.0693 7.57813C13.8907 6.91133 14.2863 6.22554 14.9531 6.04688ZM11.4277 5.0752C12.0943 4.89686 12.7792 5.29246 12.9579 5.95899C13.1366 6.62575 12.7409 7.31147 12.0742 7.49024C11.4076 7.66867 10.7227 7.2729 10.5439 6.60645C10.3653 5.93965 10.7609 5.25386 11.4277 5.0752Z" 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/color_off_24_regular.svg";

Details