Bot icon

Use the Bot 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 { Bot24Regular, Bot24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.7534 13.9994C18.9961 13.9994 20.0034 15.0068 20.0034 16.2494V17.1545C20.0034 18.2482 19.526 19.2874 18.6961 19.9998C17.1307 21.3437 14.8904 22.0006 12.0004 22.0006C9.11087 22.0006 6.87205 21.344 5.30918 20.0003C4.48056 19.2879 4.00391 18.2495 4.00391 17.1567V16.2494C4.00391 15.0068 5.01127 13.9994 6.25391 13.9994H17.7534ZM17.7534 15.4994H6.25391C5.83969 15.4994 5.50391 15.8352 5.50391 16.2494V17.1567C5.50391 17.8124 5.7899 18.4354 6.28707 18.8629C7.54516 19.9445 9.44117 20.5006 12.0004 20.5006C14.5603 20.5006 16.4582 19.9442 17.7191 18.8617C18.2169 18.4342 18.5034 17.8107 18.5034 17.1545V16.2494C18.5034 15.8352 18.1676 15.4994 17.7534 15.4994ZM11.8989 2.00685L12.0007 2C12.3804 2 12.6942 2.28215 12.7438 2.64823L12.7507 2.75L12.7499 3.499L16.2504 3.49951C17.493 3.49951 18.5004 4.50687 18.5004 5.74951V10.2541C18.5004 11.4967 17.493 12.5041 16.2504 12.5041H7.75036C6.50772 12.5041 5.50036 11.4967 5.50036 10.2541V5.74951C5.50036 4.50687 6.50772 3.49951 7.75036 3.49951L11.2499 3.499L11.2507 2.75C11.2507 2.3703 11.5328 2.05651 11.8989 2.00685L12.0007 2L11.8989 2.00685ZM16.2504 4.99951H7.75036C7.33615 4.99951 7.00036 5.33529 7.00036 5.74951V10.2541C7.00036 10.6683 7.33615 11.0041 7.75036 11.0041H16.2504C16.6646 11.0041 17.0004 10.6683 17.0004 10.2541V5.74951C17.0004 5.33529 16.6646 4.99951 16.2504 4.99951ZM9.74965 6.49951C10.4396 6.49951 10.9989 7.05883 10.9989 7.74879C10.9989 8.43876 10.4396 8.99808 9.74965 8.99808C9.05969 8.99808 8.50036 8.43876 8.50036 7.74879C8.50036 7.05883 9.05969 6.49951 9.74965 6.49951ZM14.2424 6.49951C14.9324 6.49951 15.4917 7.05883 15.4917 7.74879C15.4917 8.43876 14.9324 8.99808 14.2424 8.99808C13.5524 8.99808 12.9931 8.43876 12.9931 7.74879C12.9931 7.05883 13.5524 6.49951 14.2424 6.49951Z" 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/bot_24_regular.svg";

Details

Keywords

airobotautomatedenhance