Whiteboard icon

Use the Whiteboard 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 { Whiteboard24Regular, Whiteboard24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M15.989 4L14.486 5.5H5.25L5.10647 5.5058C4.20711 5.57881 3.5 6.33183 3.5 7.25V9.49L6.11033 7.85007C7.11458 7.21884 8.42578 7.47881 9.11805 8.41878L9.21264 8.55767C9.60754 9.18595 9.66532 9.96467 9.37644 10.6398L9.29699 10.8063L8.08926 13.0917C7.89573 13.4579 8.03572 13.9117 8.40194 14.1052C8.5952 14.2073 8.82159 14.2193 9.02228 14.1419L9.12021 14.0957L10.8792 13.1027C11.2392 12.8979 11.6971 13.0238 11.9019 13.3838C12.0896 13.7139 11.9995 14.1261 11.7059 14.3503L11.6208 14.4066L9.85592 15.4029C9.18921 15.7781 8.37751 15.7889 7.70109 15.4314C6.65021 14.8761 6.22026 13.6064 6.69297 12.5355L6.76305 12.3908L7.97078 10.1054C8.09599 9.86851 8.08527 9.58278 7.94267 9.3559C7.74228 9.03709 7.34143 8.92083 7.00673 9.06794L6.90856 9.12004L3.5 11.262V16.7546C3.5 17.7211 4.2835 18.5046 5.25 18.5046H18.75C19.7165 18.5046 20.5 17.7211 20.5 16.7546V9.443L22 7.946V16.7546C22 18.5495 20.5449 20.0046 18.75 20.0046H5.25C3.45507 20.0046 2 18.5495 2 16.7546V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4H15.989ZM21.1755 3.54486L21.3057 3.66549L21.4262 3.79573C22.1894 4.68738 22.1488 6.03053 21.3047 6.87411L17.0238 11.1478C16.7608 11.4103 16.4369 11.6036 16.081 11.7104L13.7535 12.4091C13.2245 12.5679 12.667 12.2678 12.5082 11.7388C12.4499 11.5448 12.452 11.3376 12.5141 11.1448L13.253 8.84996C13.3627 8.50946 13.5519 8.20001 13.8051 7.94728L18.0957 3.66366C18.9405 2.82024 20.2841 2.78082 21.1755 3.54486ZM19.1555 4.72519L14.8648 9.00881C14.7805 9.09305 14.7174 9.1962 14.6808 9.3097L14.2335 10.6989L15.6498 10.2738C15.7684 10.2381 15.8764 10.1737 15.9641 10.0862L20.2441 5.81339L20.3188 5.7269C20.5422 5.42599 20.5176 4.99885 20.2447 4.72582C19.9441 4.42497 19.4565 4.42469 19.1555 4.72519Z" 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/whiteboard_24_regular.svg";

Details

Keywords

drawpencilsketchcreatebrainstormcurve