Person Tag icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Tag 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 Tag 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 { PersonTag24Regular, PersonTag24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonTag24Regular aria-label="Person Tag" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_tag_24_regular.svg" width="24" height="24" alt="Person Tag"> 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.9981 13.9956V15.4956H4.24934C3.83567 15.4956 3.50031 15.8309 3.50031 16.2445V16.8222C3.50031 17.3579 3.69146 17.876 4.03939 18.2834C5.29296 19.7511 7.25925 20.4969 9.99812 20.4969C11.104 20.4969 12.0842 20.3753 12.9427 20.1337L14.1138 21.3257C12.9335 21.7742 11.5592 21.997 9.99812 21.997C6.85161 21.997 4.4651 21.0918 2.89847 19.2575C2.31858 18.5785 2 17.715 2 16.8222V16.2445C2 15.0025 3.00707 13.9956 4.24934 13.9956H10.9981ZM14.9992 7.00013C14.9992 4.23863 12.7601 2 9.99812 2C7.23612 2 4.99708 4.23863 4.99708 7.00013C4.99708 9.76162 7.23612 12.0003 9.99812 12.0003C12.7601 12.0003 14.9992 9.76162 14.9992 7.00013ZM6.49739 7.00013C6.49739 5.06708 8.06472 3.50004 9.99812 3.50004C11.9315 3.50004 13.4988 5.06708 13.4988 7.00013C13.4988 8.93317 11.9315 10.5002 9.99812 10.5002C8.06472 10.5002 6.49739 8.93317 6.49739 7.00013ZM16.5713 22.3999L12.5704 18.3277C12.2036 17.9544 11.9983 17.4528 11.9983 16.9305V13.994C11.9983 12.892 12.8942 11.9986 14.0001 11.9978L16.9178 11.9958C17.4457 11.9954 17.9525 12.2026 18.328 12.5725L22.4045 16.5867C23.1937 17.3639 23.1992 18.632 22.4166 19.4154L19.4234 22.4121C18.6356 23.2007 17.3527 23.1953 16.5713 22.3999ZM14.9952 15.9957C15.5469 15.9957 15.9941 15.548 15.9941 14.9957C15.9941 14.4434 15.5469 13.9957 14.9952 13.9957C14.4435 13.9957 13.9963 14.4434 13.9963 14.9957C13.9963 15.548 14.4435 15.9957 14.9952 15.9957Z" 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_tag_24_regular.svg";Details
| Name | Person Tag |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_tag_24_regular.svg |
| Filled file | ic_fluent_person_tag_24_filled.svg |
| React components | PersonTag24Regular, PersonTag24Filled |
| License | MIT (© Microsoft Corporation) |