pill icon
pill from IconPark by ByteDance · Color · Health · Apache-2.0 Free for personal and commercial use.
- Name
- pill
- Set
- IconPark
- Style
- Color
- Category
- Health
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
pillEmoji One (Colored)pill-16-filledFluent UI System IconspillFluent EmojipillFluent Emoji FlatpillFluent Emoji High ContrastpillFirefox OS Emojipillcss.ggpillHuge IconspillHumbleiconspillIconPark OutlinepillIconPark SolidpillIconPark TwoTonepillLucidepillMajesticonspillMaterial SymbolspillMaterial Symbols LightpillMaterial Design IconspillNoto EmojipillOpenMojipillPhosphorpill-boldSolarpillStreamline EmojispillTabler IconspillTwitter Emoji
More health icons from IconPark
Use the pill icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M5.61497 22.5852C4.4434 21.4136 4.4434 19.5141 5.61497 18.3425L18.3429 5.61463C19.5145 4.44305 21.414 4.44305 22.5855 5.61462L42.3845 25.4136C43.5561 26.5852 43.5561 28.4847 42.3845 29.6563L29.6566 42.3842C28.485 43.5557 26.5855 43.5557 25.414 42.3842L5.61497 22.5852Z"/><circle cx="14.808" cy="20.465" r="2" fill="#fff" transform="rotate(-45 14.808 20.465)"/><circle cx="23.293" cy="28.949" r="2" fill="#fff" transform="rotate(-45 23.293 28.95)"/><circle cx="19.05" cy="24.707" r="2" fill="#fff" transform="rotate(-45 19.05 24.707)"/><circle cx="27.536" cy="33.193" r="2" fill="#fff" transform="rotate(-45 27.536 33.193)"/><circle cx="20.464" cy="14.807" r="2" fill="#fff" transform="rotate(-45 20.464 14.807)"/><circle cx="28.95" cy="23.293" r="2" fill="#fff" transform="rotate(-45 28.95 23.293)"/><circle cx="24.707" cy="19.051" r="2" fill="#fff" transform="rotate(-45 24.707 19.05)"/><circle cx="33.193" cy="27.535" r="2" fill="#fff" transform="rotate(-45 33.193 27.535)"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkPill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" strokeLinejoin="round" strokeWidth="4" d="M5.61497 22.5852C4.4434 21.4136 4.4434 19.5141 5.61497 18.3425L18.3429 5.61463C19.5145 4.44305 21.414 4.44305 22.5855 5.61462L42.3845 25.4136C43.5561 26.5852 43.5561 28.4847 42.3845 29.6563L29.6566 42.3842C28.485 43.5557 26.5855 43.5557 25.414 42.3842L5.61497 22.5852Z"/><circle cx="14.808" cy="20.465" r="2" fill="#fff" transform="rotate(-45 14.808 20.465)"/><circle cx="23.293" cy="28.949" r="2" fill="#fff" transform="rotate(-45 23.293 28.95)"/><circle cx="19.05" cy="24.707" r="2" fill="#fff" transform="rotate(-45 19.05 24.707)"/><circle cx="27.536" cy="33.193" r="2" fill="#fff" transform="rotate(-45 27.536 33.193)"/><circle cx="20.464" cy="14.807" r="2" fill="#fff" transform="rotate(-45 20.464 14.807)"/><circle cx="28.95" cy="23.293" r="2" fill="#fff" transform="rotate(-45 28.95 23.293)"/><circle cx="24.707" cy="19.051" r="2" fill="#fff" transform="rotate(-45 24.707 19.05)"/><circle cx="33.193" cy="27.535" r="2" fill="#fff" transform="rotate(-45 33.193 27.535)"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M5.61497 22.5852C4.4434 21.4136 4.4434 19.5141 5.61497 18.3425L18.3429 5.61463C19.5145 4.44305 21.414 4.44305 22.5855 5.61462L42.3845 25.4136C43.5561 26.5852 43.5561 28.4847 42.3845 29.6563L29.6566 42.3842C28.485 43.5557 26.5855 43.5557 25.414 42.3842L5.61497 22.5852Z"/><circle cx="14.808" cy="20.465" r="2" fill="#fff" transform="rotate(-45 14.808 20.465)"/><circle cx="23.293" cy="28.949" r="2" fill="#fff" transform="rotate(-45 23.293 28.95)"/><circle cx="19.05" cy="24.707" r="2" fill="#fff" transform="rotate(-45 19.05 24.707)"/><circle cx="27.536" cy="33.193" r="2" fill="#fff" transform="rotate(-45 27.536 33.193)"/><circle cx="20.464" cy="14.807" r="2" fill="#fff" transform="rotate(-45 20.464 14.807)"/><circle cx="28.95" cy="23.293" r="2" fill="#fff" transform="rotate(-45 28.95 23.293)"/><circle cx="24.707" cy="19.051" r="2" fill="#fff" transform="rotate(-45 24.707 19.05)"/><circle cx="33.193" cy="27.535" r="2" fill="#fff" transform="rotate(-45 33.193 27.535)"/></g></svg> </template>
CSS
.icon-pill {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M5.61497%2022.5852C4.4434%2021.4136%204.4434%2019.5141%205.61497%2018.3425L18.3429%205.61463C19.5145%204.44305%2021.414%204.44305%2022.5855%205.61462L42.3845%2025.4136C43.5561%2026.5852%2043.5561%2028.4847%2042.3845%2029.6563L29.6566%2042.3842C28.485%2043.5557%2026.5855%2043.5557%2025.414%2042.3842L5.61497%2022.5852Z%22%2F%3E%3Ccircle%20cx%3D%2214.808%22%20cy%3D%2220.465%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2014.808%2020.465)%22%2F%3E%3Ccircle%20cx%3D%2223.293%22%20cy%3D%2228.949%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2023.293%2028.95)%22%2F%3E%3Ccircle%20cx%3D%2219.05%22%20cy%3D%2224.707%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2019.05%2024.707)%22%2F%3E%3Ccircle%20cx%3D%2227.536%22%20cy%3D%2233.193%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2027.536%2033.193)%22%2F%3E%3Ccircle%20cx%3D%2220.464%22%20cy%3D%2214.807%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2020.464%2014.807)%22%2F%3E%3Ccircle%20cx%3D%2228.95%22%20cy%3D%2223.293%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2028.95%2023.293)%22%2F%3E%3Ccircle%20cx%3D%2224.707%22%20cy%3D%2219.051%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2024.707%2019.05)%22%2F%3E%3Ccircle%20cx%3D%2233.193%22%20cy%3D%2227.535%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2033.193%2027.535)%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M5.61497%2022.5852C4.4434%2021.4136%204.4434%2019.5141%205.61497%2018.3425L18.3429%205.61463C19.5145%204.44305%2021.414%204.44305%2022.5855%205.61462L42.3845%2025.4136C43.5561%2026.5852%2043.5561%2028.4847%2042.3845%2029.6563L29.6566%2042.3842C28.485%2043.5557%2026.5855%2043.5557%2025.414%2042.3842L5.61497%2022.5852Z%22%2F%3E%3Ccircle%20cx%3D%2214.808%22%20cy%3D%2220.465%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2014.808%2020.465)%22%2F%3E%3Ccircle%20cx%3D%2223.293%22%20cy%3D%2228.949%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2023.293%2028.95)%22%2F%3E%3Ccircle%20cx%3D%2219.05%22%20cy%3D%2224.707%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2019.05%2024.707)%22%2F%3E%3Ccircle%20cx%3D%2227.536%22%20cy%3D%2233.193%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2027.536%2033.193)%22%2F%3E%3Ccircle%20cx%3D%2220.464%22%20cy%3D%2214.807%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2020.464%2014.807)%22%2F%3E%3Ccircle%20cx%3D%2228.95%22%20cy%3D%2223.293%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2028.95%2023.293)%22%2F%3E%3Ccircle%20cx%3D%2224.707%22%20cy%3D%2219.051%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2024.707%2019.05)%22%2F%3E%3Ccircle%20cx%3D%2233.193%22%20cy%3D%2227.535%22%20r%3D%222%22%20fill%3D%22%23fff%22%20transform%3D%22rotate(-45%2033.193%2027.535)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/pill.svg?color=%231a73e8&size=48
