pill icon
pill-28-regular from Fluent UI System Icons by Microsoft Corporation · 28 Regular · MIT Free for personal and commercial use.
- Name
- pill-28-regular
- Set
- Fluent UI System Icons
- Style
- 28 Regular
- Viewbox
- 28×28
- License
- MIT
7 other variants in Fluent UI System Icons
The same icon in other sets
All pill icons →pillEmoji One (Colored)pillFluent EmojipillFluent Emoji FlatpillFluent Emoji High ContrastpillFirefox OS Emojipillcss.ggpillHuge IconspillHumbleiconspillIconParkpillIconPark OutlinepillIconPark SolidpillIconPark TwoTonepillLucidepillMajesticonspillMaterial SymbolspillMaterial Symbols LightpillMaterial Design IconspillNoto EmojipillOpenMojipillPhosphorpillReiconpill-boldSolarpillStreamline EmojispillTabler Icons
Use the pill icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M11.781 20.28a.75.75 0 0 0-1.06-1.06l-1.978 1.977a1.05 1.05 0 0 1-1.484 0l-.478-.477a.75.75 0 0 0-1.06 1.06l.477.477a2.55 2.55 0 0 0 3.606 0zM24.255 3.754c-2.338-2.338-6.135-2.347-8.475-.01L3.742 15.764c-2.342 2.34-2.336 6.141.004 8.482c2.338 2.337 6.136 2.346 8.475.01l12.038-12.02c2.342-2.34 2.336-6.142-.004-8.482m-13.967 7.594l6.364 6.364l-5.49 5.482a4.5 4.5 0 0 1-6.355-.01a4.5 4.5 0 0 1-.005-6.358zm12.911-.174l-5.486 5.478l-6.364-6.364l5.49-5.483a4.5 4.5 0 0 1 6.355.01a4.5 4.5 0 0 1 .005 6.359"/></svg>
React
import type { SVGProps } from "react";
export function FluentPill28Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M11.781 20.28a.75.75 0 0 0-1.06-1.06l-1.978 1.977a1.05 1.05 0 0 1-1.484 0l-.478-.477a.75.75 0 0 0-1.06 1.06l.477.477a2.55 2.55 0 0 0 3.606 0zM24.255 3.754c-2.338-2.338-6.135-2.347-8.475-.01L3.742 15.764c-2.342 2.34-2.336 6.141.004 8.482c2.338 2.337 6.136 2.346 8.475.01l12.038-12.02c2.342-2.34 2.336-6.142-.004-8.482m-13.967 7.594l6.364 6.364l-5.49 5.482a4.5 4.5 0 0 1-6.355-.01a4.5 4.5 0 0 1-.005-6.358zm12.911-.174l-5.486 5.478l-6.364-6.364l5.49-5.483a4.5 4.5 0 0 1 6.355.01a4.5 4.5 0 0 1 .005 6.359"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M11.781 20.28a.75.75 0 0 0-1.06-1.06l-1.978 1.977a1.05 1.05 0 0 1-1.484 0l-.478-.477a.75.75 0 0 0-1.06 1.06l.477.477a2.55 2.55 0 0 0 3.606 0zM24.255 3.754c-2.338-2.338-6.135-2.347-8.475-.01L3.742 15.764c-2.342 2.34-2.336 6.141.004 8.482c2.338 2.337 6.136 2.346 8.475.01l12.038-12.02c2.342-2.34 2.336-6.142-.004-8.482m-13.967 7.594l6.364 6.364l-5.49 5.482a4.5 4.5 0 0 1-6.355-.01a4.5 4.5 0 0 1-.005-6.358zm12.911-.174l-5.486 5.478l-6.364-6.364l5.49-5.483a4.5 4.5 0 0 1 6.355.01a4.5 4.5 0 0 1 .005 6.359"/></svg> </template>
CSS
.icon-pill-28-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.781%2020.28a.75.75%200%200%200-1.06-1.06l-1.978%201.977a1.05%201.05%200%200%201-1.484%200l-.478-.477a.75.75%200%200%200-1.06%201.06l.477.477a2.55%202.55%200%200%200%203.606%200zM24.255%203.754c-2.338-2.338-6.135-2.347-8.475-.01L3.742%2015.764c-2.342%202.34-2.336%206.141.004%208.482c2.338%202.337%206.136%202.346%208.475.01l12.038-12.02c2.342-2.34%202.336-6.142-.004-8.482m-13.967%207.594l6.364%206.364l-5.49%205.482a4.5%204.5%200%200%201-6.355-.01a4.5%204.5%200%200%201-.005-6.358zm12.911-.174l-5.486%205.478l-6.364-6.364l5.49-5.483a4.5%204.5%200%200%201%206.355.01a4.5%204.5%200%200%201%20.005%206.359%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.781%2020.28a.75.75%200%200%200-1.06-1.06l-1.978%201.977a1.05%201.05%200%200%201-1.484%200l-.478-.477a.75.75%200%200%200-1.06%201.06l.477.477a2.55%202.55%200%200%200%203.606%200zM24.255%203.754c-2.338-2.338-6.135-2.347-8.475-.01L3.742%2015.764c-2.342%202.34-2.336%206.141.004%208.482c2.338%202.337%206.136%202.346%208.475.01l12.038-12.02c2.342-2.34%202.336-6.142-.004-8.482m-13.967%207.594l6.364%206.364l-5.49%205.482a4.5%204.5%200%200%201-6.355-.01a4.5%204.5%200%200%201-.005-6.358zm12.911-.174l-5.486%205.478l-6.364-6.364l5.49-5.483a4.5%204.5%200%200%201%206.355.01a4.5%204.5%200%200%201%20.005%206.359%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/pill-28-regular.svg?color=%231a73e8&size=48
