person-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.

Name
person-fill
Set
Framework7 Icons
Style
Fill
Viewbox
56×56
License
MIT

1 other variant in Framework7 Icons

The same icon in other sets

Related icons in Framework7 Icons

Use the person icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28.012 27.367c5.039 0 9.375-4.5 9.375-10.36c0-5.788-4.36-10.077-9.375-10.077c-5.016 0-9.375 4.383-9.375 10.125c0 5.812 4.36 10.312 9.375 10.312M13.293 49.07h29.438c3.68 0 4.992-1.054 4.992-3.117c0-6.047-7.57-14.39-19.711-14.39c-12.164 0-19.735 8.343-19.735 14.39c0 2.063 1.313 3.117 5.016 3.117"/></svg>

React

import type { SVGProps } from "react";

export function F7PersonFill(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="M28.012 27.367c5.039 0 9.375-4.5 9.375-10.36c0-5.788-4.36-10.077-9.375-10.077c-5.016 0-9.375 4.383-9.375 10.125c0 5.812 4.36 10.312 9.375 10.312M13.293 49.07h29.438c3.68 0 4.992-1.054 4.992-3.117c0-6.047-7.57-14.39-19.711-14.39c-12.164 0-19.735 8.343-19.735 14.39c0 2.063 1.313 3.117 5.016 3.117"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28.012 27.367c5.039 0 9.375-4.5 9.375-10.36c0-5.788-4.36-10.077-9.375-10.077c-5.016 0-9.375 4.383-9.375 10.125c0 5.812 4.36 10.312 9.375 10.312M13.293 49.07h29.438c3.68 0 4.992-1.054 4.992-3.117c0-6.047-7.57-14.39-19.711-14.39c-12.164 0-19.735 8.343-19.735 14.39c0 2.063 1.313 3.117 5.016 3.117"/></svg>
</template>

CSS

.icon-person-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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28.012%2027.367c5.039%200%209.375-4.5%209.375-10.36c0-5.788-4.36-10.077-9.375-10.077c-5.016%200-9.375%204.383-9.375%2010.125c0%205.812%204.36%2010.312%209.375%2010.312M13.293%2049.07h29.438c3.68%200%204.992-1.054%204.992-3.117c0-6.047-7.57-14.39-19.711-14.39c-12.164%200-19.735%208.343-19.735%2014.39c0%202.063%201.313%203.117%205.016%203.117%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%22M28.012%2027.367c5.039%200%209.375-4.5%209.375-10.36c0-5.788-4.36-10.077-9.375-10.077c-5.016%200-9.375%204.383-9.375%2010.125c0%205.812%204.36%2010.312%209.375%2010.312M13.293%2049.07h29.438c3.68%200%204.992-1.054%204.992-3.117c0-6.047-7.57-14.39-19.711-14.39c-12.164%200-19.735%208.343-19.735%2014.39c0%202.063%201.313%203.117%205.016%203.117%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/person-fill.svg?color=%231a73e8&size=48