Molecule icon

Use the Molecule 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 { Molecule24Regular, Molecule24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M16 12C18.7614 12 21 9.76142 21 7C21 4.23858 18.7614 2 16 2C13.2386 2 11 4.23858 11 7C11 7.90641 11.2412 8.75648 11.6629 9.48955L8.94912 11.2976C8.21788 10.5 7.16734 10 6 10C3.79086 10 2 11.7909 2 14C2 16.2091 3.79086 18 6 18C7.29598 18 8.44801 17.3837 9.17897 16.4281L13.066 18.3714C13.0227 18.5741 13 18.7844 13 19C13 20.6569 14.3431 22 16 22C17.6569 22 19 20.6569 19 19C19 17.3431 17.6569 16 16 16C15.0971 16 14.2874 16.3989 13.7374 17.03L9.85057 15.0869C9.94792 14.7413 10 14.3767 10 14C10 13.4977 9.90743 13.0171 9.73841 12.5742L12.601 10.667C13.493 11.4942 14.6874 12 16 12ZM16 10.5C14.067 10.5 12.5 8.933 12.5 7C12.5 5.067 14.067 3.5 16 3.5C17.933 3.5 19.5 5.067 19.5 7C19.5 8.933 17.933 10.5 16 10.5ZM6 16.5C4.61929 16.5 3.5 15.3807 3.5 14C3.5 12.6193 4.61929 11.5 6 11.5C7.38071 11.5 8.5 12.6193 8.5 14C8.5 15.3807 7.38071 16.5 6 16.5ZM17.5 19C17.5 19.8284 16.8284 20.5 16 20.5C15.1716 20.5 14.5 19.8284 14.5 19C14.5 18.1716 15.1716 17.5 16 17.5C16.8284 17.5 17.5 18.1716 17.5 19Z" 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/molecule_24_regular.svg";

Details

Keywords

atomchemicalcompoundsciencechemistry