Syringe icon

Use the Syringe 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 { Syringe24Regular, Syringe24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.7246 2.21967C17.0174 1.92678 17.4923 1.92678 17.7852 2.21967L21.7852 6.21967C22.0781 6.51256 22.0781 6.98744 21.7852 7.28033C21.4923 7.57322 21.0174 7.57322 20.7246 7.28033L20.2543 6.81009L18.5607 8.50003L21.0303 10.9697C21.3232 11.2626 21.3232 11.7374 21.0303 12.0303C20.7374 12.3232 20.2626 12.3232 19.9697 12.0303L18.5 10.5607L11.659 17.4017C10.9557 18.1049 10.0019 18.5 9.00736 18.5H6.56066L3.28033 21.7803C2.98744 22.0732 2.51256 22.0732 2.21967 21.7803C1.92678 21.4874 1.92678 21.0126 2.21967 20.7197L5.5 17.4393V14.9926C5.5 13.9981 5.89509 13.0443 6.59835 12.341L7.4691 11.4702C7.46891 11.4704 7.46929 11.47 7.4691 11.4702C7.46929 11.47 7.47005 11.4693 7.47024 11.4691L9.4692 9.47014C9.46905 9.47029 9.46936 9.46998 9.4692 9.47014C9.46936 9.46998 9.46998 9.46936 9.47014 9.4692L11.4689 7.47046C11.4691 7.4702 11.4694 7.46993 11.4697 7.46967C11.4699 7.46941 11.4702 7.46914 11.4705 7.46888L13.4393 5.5L11.9697 4.03033C11.6768 3.73744 11.6768 3.26256 11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967L15.5 5.43937L17.1936 3.74942L16.7246 3.28033C16.4317 2.98744 16.4317 2.51256 16.7246 2.21967ZM12 9.06066L11.0607 10L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L10 11.0607L9.06066 12L9.78033 12.7197C10.0732 13.0126 10.0732 13.4874 9.78033 13.7803C9.48744 14.0732 9.01256 14.0732 8.71967 13.7803L8 13.0607L7.65901 13.4017C7.23705 13.8236 7 14.3959 7 14.9926V17H9.00736C9.6041 17 10.1764 16.7629 10.5983 16.341L17.4393 9.5L14.5 6.56066L13.0607 8L13.7803 8.71967C14.0732 9.01256 14.0732 9.48744 13.7803 9.78033C13.4874 10.0732 13.0126 10.0732 12.7197 9.78033L12 9.06066ZM19.1936 5.74942L18.2543 4.81009L16.5607 6.50003L17.5 7.43937L19.1936 5.74942Z" 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/syringe_24_regular.svg";

Details

Keywords

healthhospitaldoctormedicinevaccination