Beaker Add icon
Used to represent testing scenarios. The Beaker 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 Beaker 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 { BeakerAdd24Regular, BeakerAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <BeakerAdd24Regular aria-label="Beaker Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_beaker_add_24_regular.svg" width="24" height="24" alt="Beaker 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="M7.99951 4.5H8.99949V10.7382C8.99949 11.1132 8.90579 11.4822 8.7269 11.8117L5.1422 18.415C4.50919 19.5811 5.35339 20.9999 6.6802 20.9999H12.0213C11.7247 20.5367 11.4853 20.0334 11.313 19.4999H6.6802C6.49065 19.4999 6.37005 19.2973 6.46048 19.1307L8.43143 15.5H11.313C11.4853 14.9665 11.7248 14.4632 12.0213 14H9.24572L10.0452 12.5273C10.3433 11.9781 10.4995 11.3631 10.4995 10.7382V4.5H13.4995V10.7382C13.4995 11.2297 13.5961 11.715 13.7824 12.1671C14.1944 11.8794 14.6413 11.6382 15.1154 11.4511C15.0389 11.2221 14.9995 10.9814 14.9995 10.7382V4.5H15.9995C16.4137 4.5 16.7495 4.16421 16.7495 3.75C16.7495 3.33579 16.4137 3 15.9995 3H7.99951C7.5853 3 7.24951 3.33579 7.24951 3.75C7.24951 4.16421 7.5853 4.5 7.99951 4.5ZM17.4995 12C20.5371 12 22.9995 14.4624 22.9995 17.5C22.9995 20.5376 20.5371 23 17.4995 23C14.4619 23 11.9995 20.5376 11.9995 17.5C11.9995 14.4624 14.4619 12 17.4995 12ZM18.0006 20.5035L18.0002 18H20.5025C20.7787 18 21.0025 17.7762 21.0025 17.5C21.0025 17.2239 20.7787 17 20.5025 17H18L17.9995 14.4993C17.9995 14.2231 17.7757 13.9993 17.4995 13.9993C17.2234 13.9993 16.9995 14.2231 16.9995 14.4993L17 17H14.4956C14.2195 17 13.9956 17.2239 13.9956 17.5C13.9956 17.7762 14.2195 18 14.4956 18H17.0002L17.0006 20.5035C17.0006 20.7797 17.2245 21.0035 17.5006 21.0035C17.7768 21.0035 18.0006 20.7797 18.0006 20.5035Z" 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/beaker_add_24_regular.svg";Details
| Name | Beaker Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_beaker_add_24_regular.svg |
| Filled file | ic_fluent_beaker_add_24_filled.svg |
| React components | BeakerAdd24Regular, BeakerAdd24Filled |
| License | MIT (© Microsoft Corporation) |