Fluent Icons

Syringe icon

Used in medical, health & doctor events. The Syringe icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_syringe_24_regular.svg

Syringe icon in React

npm install @fluentui/react-icons

import { Syringe24Regular } from "@fluentui/react-icons";

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

Syringe icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/syringe_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/syringe_24_regular.svg" width="24" height="24" alt="Syringe">

Syringe icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Syringe())" />

Syringe icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.syringe_24_regular)

Syringe icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xEBE3;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xEBE3;" FontSize="24" />

Syringe icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_syringe_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\ebe3";
  font-size: 24px;
}

Syringe icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_syringe_24_regular" />

// Kotlin
R.drawable.ic_fluent_syringe_24_regular

Syringe icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .syringe24Regular)

Syringe icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameSyringe
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_syringe_24_regular.svg
Filled fileic_fluent_syringe_24_filled.svg
React (Regular)Syringe20Regular, Syringe24Regular
React (Filled)Syringe20Filled, Syringe24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

healthhospital

Related icons

Person PillPillPulsePulse SquareStethoscopeXrayBriefcase MedicalDoctorPatientBowl SaladClipboard PulseDocument Heart Pulse