ios color fill icon
ios-color-fill from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- ios-color-fill
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
Related icons in IonIcons
ios-addios-add-circleios-airplaneios-alarmios-albumsios-alertios-american-footballios-americanfootballios-analyticsios-apertureios-appsios-appstoreios-archiveios-arrow-backios-arrow-downios-arrow-dropdownios-arrow-dropdown-circleios-arrow-dropleftios-arrow-dropleft-circleios-arrow-droprightios-arrow-dropright-circleios-arrow-dropupios-arrow-dropup-circleios-arrow-forward
Use the ios color fill icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M231.5 118.3c.1 0 .1-.1 0 0L175.3 62c-9.3-9.3-21.6-14-33.9-14-12.3 0-24.6 4.7-33.9 14-18.7 18.7-18.7 49.2 0 67.9l49.3 49.3-84.5 84c-11.1 11.1-11 29.2.3 40l131.2 126c10.9 10.4 28 10.4 38.9-.1 37.8-36.6 118.3-114.5 126.7-122.9 5.8-5.8 18.2-7.1 28.7-7.1h.3c5.9 0 8.8-7.1 4.6-11.2L231.5 118.3zm-103.9-7.9c-7.2-7.2-8.3-18.8-2-26.8 3.8-4.9 9.6-7.6 15.8-7.6 5.4 0 10.4 2.1 14.1 5.8l49.3 49.3-28.3 28.3-48.9-49z" fill="currentColor"/><path d="M403 339.5c-1.6-1.9-4.5-1.9-6.1 0-10.5 12.2-45 53.9-45 76.4 0 26.6 21.5 48.1 48 48.1s48-21.6 48-48.1c.1-22.6-34.3-64.2-44.9-76.4z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function IonIosColorFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M231.5 118.3c.1 0 .1-.1 0 0L175.3 62c-9.3-9.3-21.6-14-33.9-14-12.3 0-24.6 4.7-33.9 14-18.7 18.7-18.7 49.2 0 67.9l49.3 49.3-84.5 84c-11.1 11.1-11 29.2.3 40l131.2 126c10.9 10.4 28 10.4 38.9-.1 37.8-36.6 118.3-114.5 126.7-122.9 5.8-5.8 18.2-7.1 28.7-7.1h.3c5.9 0 8.8-7.1 4.6-11.2L231.5 118.3zm-103.9-7.9c-7.2-7.2-8.3-18.8-2-26.8 3.8-4.9 9.6-7.6 15.8-7.6 5.4 0 10.4 2.1 14.1 5.8l49.3 49.3-28.3 28.3-48.9-49z" fill="currentColor"/><path d="M403 339.5c-1.6-1.9-4.5-1.9-6.1 0-10.5 12.2-45 53.9-45 76.4 0 26.6 21.5 48.1 48 48.1s48-21.6 48-48.1c.1-22.6-34.3-64.2-44.9-76.4z" fill="currentColor"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M231.5 118.3c.1 0 .1-.1 0 0L175.3 62c-9.3-9.3-21.6-14-33.9-14-12.3 0-24.6 4.7-33.9 14-18.7 18.7-18.7 49.2 0 67.9l49.3 49.3-84.5 84c-11.1 11.1-11 29.2.3 40l131.2 126c10.9 10.4 28 10.4 38.9-.1 37.8-36.6 118.3-114.5 126.7-122.9 5.8-5.8 18.2-7.1 28.7-7.1h.3c5.9 0 8.8-7.1 4.6-11.2L231.5 118.3zm-103.9-7.9c-7.2-7.2-8.3-18.8-2-26.8 3.8-4.9 9.6-7.6 15.8-7.6 5.4 0 10.4 2.1 14.1 5.8l49.3 49.3-28.3 28.3-48.9-49z" fill="currentColor"/><path d="M403 339.5c-1.6-1.9-4.5-1.9-6.1 0-10.5 12.2-45 53.9-45 76.4 0 26.6 21.5 48.1 48 48.1s48-21.6 48-48.1c.1-22.6-34.3-64.2-44.9-76.4z" fill="currentColor"/></svg> </template>
CSS
.icon-ios-color-fill {
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%20512%20512%22%3E%3Cpath%20d%3D%22M231.5%20118.3c.1%200%20.1-.1%200%200L175.3%2062c-9.3-9.3-21.6-14-33.9-14-12.3%200-24.6%204.7-33.9%2014-18.7%2018.7-18.7%2049.2%200%2067.9l49.3%2049.3-84.5%2084c-11.1%2011.1-11%2029.2.3%2040l131.2%20126c10.9%2010.4%2028%2010.4%2038.9-.1%2037.8-36.6%20118.3-114.5%20126.7-122.9%205.8-5.8%2018.2-7.1%2028.7-7.1h.3c5.9%200%208.8-7.1%204.6-11.2L231.5%20118.3zm-103.9-7.9c-7.2-7.2-8.3-18.8-2-26.8%203.8-4.9%209.6-7.6%2015.8-7.6%205.4%200%2010.4%202.1%2014.1%205.8l49.3%2049.3-28.3%2028.3-48.9-49z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M403%20339.5c-1.6-1.9-4.5-1.9-6.1%200-10.5%2012.2-45%2053.9-45%2076.4%200%2026.6%2021.5%2048.1%2048%2048.1s48-21.6%2048-48.1c.1-22.6-34.3-64.2-44.9-76.4z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M231.5%20118.3c.1%200%20.1-.1%200%200L175.3%2062c-9.3-9.3-21.6-14-33.9-14-12.3%200-24.6%204.7-33.9%2014-18.7%2018.7-18.7%2049.2%200%2067.9l49.3%2049.3-84.5%2084c-11.1%2011.1-11%2029.2.3%2040l131.2%20126c10.9%2010.4%2028%2010.4%2038.9-.1%2037.8-36.6%20118.3-114.5%20126.7-122.9%205.8-5.8%2018.2-7.1%2028.7-7.1h.3c5.9%200%208.8-7.1%204.6-11.2L231.5%20118.3zm-103.9-7.9c-7.2-7.2-8.3-18.8-2-26.8%203.8-4.9%209.6-7.6%2015.8-7.6%205.4%200%2010.4%202.1%2014.1%205.8l49.3%2049.3-28.3%2028.3-48.9-49z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M403%20339.5c-1.6-1.9-4.5-1.9-6.1%200-10.5%2012.2-45%2053.9-45%2076.4%200%2026.6%2021.5%2048.1%2048%2048.1s48-21.6%2048-48.1c.1-22.6-34.3-64.2-44.9-76.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/ios-color-fill.svg?color=%231a73e8&size=48
