Pill icon

Use the Pill 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 { Pill24Regular, Pill24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M10.5297 15.4697C10.8225 15.7626 10.8225 16.2374 10.5297 16.5303L8.52965 18.5303C7.68671 19.3733 6.32141 19.3755 5.4757 18.537C5.33601 18.4008 5.24927 18.2105 5.24927 18C5.24927 17.5858 5.58505 17.25 5.99927 17.25C6.20639 17.25 6.3939 17.334 6.52963 17.4697C6.78902 17.7291 7.2096 17.7291 7.46899 17.4697L9.46899 15.4697C9.76189 15.1768 10.2368 15.1768 10.5297 15.4697ZM13.3022 3.52536C15.2826 1.54493 18.4935 1.54493 20.4739 3.52536C22.4544 5.50579 22.4544 8.7167 20.4739 10.6971L10.6962 20.4749C8.71573 22.4553 5.50481 22.4553 3.52438 20.4749C1.54396 18.4945 1.54396 15.2836 3.52438 13.3031L13.3022 3.52536ZM19.4133 4.58602C18.0186 3.19138 15.7575 3.19138 14.3628 4.58602L10.0043 8.94458L15.0547 13.995L19.4133 9.63647C20.8079 8.24183 20.8079 5.98066 19.4133 4.58602ZM13.9941 15.0557L8.9436 10.0052L4.58505 14.3638C3.1904 15.7584 3.1904 18.0196 4.58504 19.4142C5.97969 20.8089 8.24085 20.8089 9.6355 19.4142L13.9941 15.0557Z" 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/pill_24_regular.svg";

Details

Keywords

medicinemedicalhospitalhealthdoctor