Bot Add icon
Used to represent chatbot scenarios. The Bot Add icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Bot Add 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 { BotAdd24Regular, BotAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <BotAdd24Regular aria-label="Bot Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_bot_add_24_regular.svg" width="24" height="24" alt="Bot Add"> 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="M11.3135 15.4999C11.4859 14.9664 11.7253 14.4631 12.0219 13.9999H6.25391C5.01127 13.9999 4.00391 15.0073 4.00391 16.2499V17.1572C4.00391 18.25 4.48056 19.2884 5.30918 20.0008C6.87205 21.3445 9.11087 22.0011 12.0004 22.0011C12.2706 22.0011 12.5352 21.9953 12.7941 21.9838C12.3742 21.5432 12.0155 21.0437 11.7317 20.499C9.30803 20.4611 7.50072 19.9068 6.28707 18.8634C5.7899 18.4359 5.50391 17.8129 5.50391 17.1572V16.2499C5.50391 15.8357 5.83969 15.4999 6.25391 15.4999H11.3135ZM17.5 11C17.7893 11 18.0743 11.0189 18.3536 11.0556C18.4484 10.8067 18.5004 10.5367 18.5004 10.2546V5.74999C18.5004 4.50735 17.493 3.49999 16.2504 3.49999L12.7499 3.49949L12.7507 2.75049L12.7438 2.64872C12.6942 2.28264 12.3804 2.00049 12.0007 2.00049L11.8989 2.00733C11.5328 2.057 11.2507 2.37079 11.2507 2.75049L11.2499 3.49949L7.75036 3.49999C6.50772 3.49999 5.50036 4.50735 5.50036 5.74999V10.2546C5.50036 11.4972 6.50772 12.5046 7.75036 12.5046H13.3409C14.468 11.5652 15.918 11 17.5 11ZM16.2504 4.99999C16.6646 4.99999 17.0004 5.33578 17.0004 5.74999V10.2546C17.0004 10.6688 16.6646 11.0046 16.2504 11.0046H7.75036C7.33615 11.0046 7.00036 10.6688 7.00036 10.2546V5.74999C7.00036 5.33578 7.33615 4.99999 7.75036 4.99999H16.2504ZM9.74965 6.49999C10.4396 6.49999 10.9989 7.05932 10.9989 7.74928C10.9989 8.43925 10.4396 8.99857 9.74965 8.99857C9.05969 8.99857 8.50036 8.43925 8.50036 7.74928C8.50036 7.05932 9.05969 6.49999 9.74965 6.49999ZM14.2424 6.49999C14.9324 6.49999 15.4917 7.05932 15.4917 7.74928C15.4917 8.43925 14.9324 8.99857 14.2424 8.99857C13.5524 8.99857 12.9931 8.43925 12.9931 7.74928C12.9931 7.05932 13.5524 6.49999 14.2424 6.49999ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM18.0006 18L18.0011 20.5035C18.0011 20.7797 17.7773 21.0035 17.5011 21.0035C17.225 21.0035 17.0011 20.7797 17.0011 20.5035L17.0006 18H14.4956C14.2197 18 13.9961 17.7762 13.9961 17.5C13.9961 17.2239 14.2197 17 14.4956 17H17.0005L17 14.4993C17 14.2231 17.2239 13.9993 17.5 13.9993C17.7761 13.9993 18 14.2231 18 14.4993L18.0005 17H20.4966C20.7725 17 20.9961 17.2239 20.9961 17.5C20.9961 17.7762 20.7725 18 20.4966 18H18.0006Z" 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_add_24_regular.svg";Details
| Name | Bot Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_bot_add_24_regular.svg |
| Filled file | ic_fluent_bot_add_24_filled.svg |
| React components | BotAdd24Regular, BotAdd24Filled |
| License | MIT (© Microsoft Corporation) |