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
pillEmoji One (Colored)pillFluent EmojipillFluent Emoji FlatpillFluent Emoji High ContrastpillFirefox OS Emojipillcss.ggpillHuge IconspillHumbleiconspillIconParkpillIconPark OutlinepillIconPark SolidpillIconPark TwoTonepillLucidepillMajesticonspillMaterial SymbolspillMaterial Symbols LightpillMaterial Design IconspillNoto EmojipillOpenMojipillPhosphorpill-boldSolarpillStreamline EmojispillTabler IconspillTwitter Emoji
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
