app badge icon
app-badge from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- app-badge
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Use the app badge icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M43.633 20.594c4.453 0 8.133-3.68 8.133-8.133s-3.657-8.133-8.133-8.133c-4.453 0-8.11 3.68-8.11 8.133s3.657 8.133 8.11 8.133M4.234 39.18c0 4.008.352 7.336 2.742 9.726s5.766 2.766 9.774 2.766h18.21c3.985 0 7.36-.375 9.75-2.766c2.392-2.39 2.743-5.718 2.743-9.726V23.219a9.7 9.7 0 0 1-3.328.515c-.164.024-.281.024-.445.047v16.032c0 2.437-.305 4.921-1.711 6.351c-1.43 1.406-3.961 1.734-6.375 1.734h-19.5c-2.414 0-4.946-.328-6.352-1.734c-1.43-1.43-1.734-3.914-1.734-6.352V20.57c0-2.46.304-4.992 1.71-6.398c1.43-1.43 3.985-1.735 6.446-1.735h16.172c0-.163.023-.304.047-.445c-.024-1.172.14-2.297.515-3.328H16.68c-3.938 0-7.313.375-9.703 2.766c-2.391 2.39-2.743 5.742-2.743 9.656Z"/></svg>
React
import type { SVGProps } from "react";
export function F7AppBadge(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M43.633 20.594c4.453 0 8.133-3.68 8.133-8.133s-3.657-8.133-8.133-8.133c-4.453 0-8.11 3.68-8.11 8.133s3.657 8.133 8.11 8.133M4.234 39.18c0 4.008.352 7.336 2.742 9.726s5.766 2.766 9.774 2.766h18.21c3.985 0 7.36-.375 9.75-2.766c2.392-2.39 2.743-5.718 2.743-9.726V23.219a9.7 9.7 0 0 1-3.328.515c-.164.024-.281.024-.445.047v16.032c0 2.437-.305 4.921-1.711 6.351c-1.43 1.406-3.961 1.734-6.375 1.734h-19.5c-2.414 0-4.946-.328-6.352-1.734c-1.43-1.43-1.734-3.914-1.734-6.352V20.57c0-2.46.304-4.992 1.71-6.398c1.43-1.43 3.985-1.735 6.446-1.735h16.172c0-.163.023-.304.047-.445c-.024-1.172.14-2.297.515-3.328H16.68c-3.938 0-7.313.375-9.703 2.766c-2.391 2.39-2.743 5.742-2.743 9.656Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M43.633 20.594c4.453 0 8.133-3.68 8.133-8.133s-3.657-8.133-8.133-8.133c-4.453 0-8.11 3.68-8.11 8.133s3.657 8.133 8.11 8.133M4.234 39.18c0 4.008.352 7.336 2.742 9.726s5.766 2.766 9.774 2.766h18.21c3.985 0 7.36-.375 9.75-2.766c2.392-2.39 2.743-5.718 2.743-9.726V23.219a9.7 9.7 0 0 1-3.328.515c-.164.024-.281.024-.445.047v16.032c0 2.437-.305 4.921-1.711 6.351c-1.43 1.406-3.961 1.734-6.375 1.734h-19.5c-2.414 0-4.946-.328-6.352-1.734c-1.43-1.43-1.734-3.914-1.734-6.352V20.57c0-2.46.304-4.992 1.71-6.398c1.43-1.43 3.985-1.735 6.446-1.735h16.172c0-.163.023-.304.047-.445c-.024-1.172.14-2.297.515-3.328H16.68c-3.938 0-7.313.375-9.703 2.766c-2.391 2.39-2.743 5.742-2.743 9.656Z"/></svg> </template>
CSS
.icon-app-badge {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M43.633%2020.594c4.453%200%208.133-3.68%208.133-8.133s-3.657-8.133-8.133-8.133c-4.453%200-8.11%203.68-8.11%208.133s3.657%208.133%208.11%208.133M4.234%2039.18c0%204.008.352%207.336%202.742%209.726s5.766%202.766%209.774%202.766h18.21c3.985%200%207.36-.375%209.75-2.766c2.392-2.39%202.743-5.718%202.743-9.726V23.219a9.7%209.7%200%200%201-3.328.515c-.164.024-.281.024-.445.047v16.032c0%202.437-.305%204.921-1.711%206.351c-1.43%201.406-3.961%201.734-6.375%201.734h-19.5c-2.414%200-4.946-.328-6.352-1.734c-1.43-1.43-1.734-3.914-1.734-6.352V20.57c0-2.46.304-4.992%201.71-6.398c1.43-1.43%203.985-1.735%206.446-1.735h16.172c0-.163.023-.304.047-.445c-.024-1.172.14-2.297.515-3.328H16.68c-3.938%200-7.313.375-9.703%202.766c-2.391%202.39-2.743%205.742-2.743%209.656Z%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M43.633%2020.594c4.453%200%208.133-3.68%208.133-8.133s-3.657-8.133-8.133-8.133c-4.453%200-8.11%203.68-8.11%208.133s3.657%208.133%208.11%208.133M4.234%2039.18c0%204.008.352%207.336%202.742%209.726s5.766%202.766%209.774%202.766h18.21c3.985%200%207.36-.375%209.75-2.766c2.392-2.39%202.743-5.718%202.743-9.726V23.219a9.7%209.7%200%200%201-3.328.515c-.164.024-.281.024-.445.047v16.032c0%202.437-.305%204.921-1.711%206.351c-1.43%201.406-3.961%201.734-6.375%201.734h-19.5c-2.414%200-4.946-.328-6.352-1.734c-1.43-1.43-1.734-3.914-1.734-6.352V20.57c0-2.46.304-4.992%201.71-6.398c1.43-1.43%203.985-1.735%206.446-1.735h16.172c0-.163.023-.304.047-.445c-.024-1.172.14-2.297.515-3.328H16.68c-3.938%200-7.313.375-9.703%202.766c-2.391%202.39-2.743%205.742-2.743%209.656Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/app-badge.svg?color=%231a73e8&size=48
