Person Pill icon
Used in a wide range of medical scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Pill 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 Person 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 { PersonPill24Regular, PersonPill24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonPill24Regular aria-label="Person Pill" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_pill_24_regular.svg" width="24" height="24" alt="Person 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="M11.1581 20.4754C11.2234 21.0058 11.3983 21.5253 11.6829 21.9972C8.69363 21.9379 6.41538 21.033 4.90219 19.2609C4.32243 18.582 4.00391 17.7185 4.00391 16.8257V16.2481C4.00391 15.006 5.01077 13.9992 6.25279 13.9992H15.5259L14.0259 15.4992H6.25279C5.8392 15.4992 5.50391 15.8345 5.50391 16.2481V16.8257C5.50391 17.3614 5.69502 17.8795 6.04288 18.2869C7.16374 19.5994 8.85454 20.3346 11.1581 20.4754ZM12.0003 2.00391C14.7617 2.00391 17.0003 4.24249 17.0003 7.00391C17.0003 9.76534 14.7617 12.0039 12.0003 12.0039C9.23895 12.0039 7.00037 9.76534 7.00037 7.00391C7.00037 4.24249 9.23895 2.00391 12.0003 2.00391ZM12.0003 3.50391C10.0673 3.50391 8.50037 5.07092 8.50037 7.00391C8.50037 8.93691 10.0673 10.5039 12.0003 10.5039C13.9333 10.5039 15.5003 8.93691 15.5003 7.00391C15.5003 5.07092 13.9333 3.50391 12.0003 3.50391ZM22.0306 12.9694C20.9092 11.8481 19.0912 11.8481 17.9699 12.9694L12.9699 17.9694C11.8486 19.0907 11.8486 20.9087 12.9699 22.0301C14.0912 23.1514 15.9092 23.1514 17.0306 22.0301L22.0306 17.0301C23.1519 15.9087 23.1519 14.0907 22.0306 12.9694ZM19.0306 14.0301C19.5661 13.4945 20.4344 13.4945 20.9699 14.0301C21.5054 14.5656 21.5054 15.4339 20.9699 15.9694L19.0002 17.9391L17.0609 15.9997L19.0306 14.0301ZM17.0306 18.9692C17.3235 19.2621 17.3235 19.7369 17.0306 20.0298L16.0306 21.0298C15.7377 21.3227 15.2628 21.3227 14.9699 21.0298C14.677 20.7369 14.677 20.2621 14.9699 19.9692L15.9699 18.9692C16.2628 18.6763 16.7377 18.6763 17.0306 18.9692Z" 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/person_pill_24_regular.svg";Details
| Name | Person Pill |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_pill_24_regular.svg |
| Filled file | ic_fluent_person_pill_24_filled.svg |
| React components | PersonPill24Regular, PersonPill24Filled |
| License | MIT (© Microsoft Corporation) |