bold icon
bold from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- bold
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
bold-outlinedAnt Design IconsboldBoxIcons v2boldCodiconsboldFont Awesome 6 SolidboldFont Awesome SolidboldFeather IconsboldHeroIconsboldHuge IconsboldHumbleiconsboldIconoirboldJam IconsboldLine AwesomeboldLucideboldMajesticonsbold-fillMingCute IconboldOcticonsboldRemix IconboldTabler Iconsbold-outlineTeenyiconsboldUnicons
Related icons in Framework7 Icons
Use the bold icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M18.027 44.758h12.235c7.148 0 11.672-3.774 11.672-9.563c0-4.57-3.282-7.875-8.063-8.132v-.188c3.89-.54 6.54-3.469 6.54-7.195c0-5.227-3.985-8.438-10.5-8.438H18.026c-2.508 0-3.96 1.477-3.96 4.055v25.43c0 2.554 1.453 4.03 3.96 4.03M21.8 25.163V16.75h5.765c3.282 0 5.227 1.5 5.227 4.078c0 2.719-2.156 4.336-5.812 4.336Zm0 14.18v-9.305h5.883c4.125 0 6.398 1.594 6.398 4.594c0 3.07-2.203 4.71-6.234 4.71Z"/></svg>
React
import type { SVGProps } from "react";
export function F7Bold(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="M18.027 44.758h12.235c7.148 0 11.672-3.774 11.672-9.563c0-4.57-3.282-7.875-8.063-8.132v-.188c3.89-.54 6.54-3.469 6.54-7.195c0-5.227-3.985-8.438-10.5-8.438H18.026c-2.508 0-3.96 1.477-3.96 4.055v25.43c0 2.554 1.453 4.03 3.96 4.03M21.8 25.163V16.75h5.765c3.282 0 5.227 1.5 5.227 4.078c0 2.719-2.156 4.336-5.812 4.336Zm0 14.18v-9.305h5.883c4.125 0 6.398 1.594 6.398 4.594c0 3.07-2.203 4.71-6.234 4.71Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M18.027 44.758h12.235c7.148 0 11.672-3.774 11.672-9.563c0-4.57-3.282-7.875-8.063-8.132v-.188c3.89-.54 6.54-3.469 6.54-7.195c0-5.227-3.985-8.438-10.5-8.438H18.026c-2.508 0-3.96 1.477-3.96 4.055v25.43c0 2.554 1.453 4.03 3.96 4.03M21.8 25.163V16.75h5.765c3.282 0 5.227 1.5 5.227 4.078c0 2.719-2.156 4.336-5.812 4.336Zm0 14.18v-9.305h5.883c4.125 0 6.398 1.594 6.398 4.594c0 3.07-2.203 4.71-6.234 4.71Z"/></svg> </template>
CSS
.icon-bold {
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%22M18.027%2044.758h12.235c7.148%200%2011.672-3.774%2011.672-9.563c0-4.57-3.282-7.875-8.063-8.132v-.188c3.89-.54%206.54-3.469%206.54-7.195c0-5.227-3.985-8.438-10.5-8.438H18.026c-2.508%200-3.96%201.477-3.96%204.055v25.43c0%202.554%201.453%204.03%203.96%204.03M21.8%2025.163V16.75h5.765c3.282%200%205.227%201.5%205.227%204.078c0%202.719-2.156%204.336-5.812%204.336Zm0%2014.18v-9.305h5.883c4.125%200%206.398%201.594%206.398%204.594c0%203.07-2.203%204.71-6.234%204.71Z%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%22M18.027%2044.758h12.235c7.148%200%2011.672-3.774%2011.672-9.563c0-4.57-3.282-7.875-8.063-8.132v-.188c3.89-.54%206.54-3.469%206.54-7.195c0-5.227-3.985-8.438-10.5-8.438H18.026c-2.508%200-3.96%201.477-3.96%204.055v25.43c0%202.554%201.453%204.03%203.96%204.03M21.8%2025.163V16.75h5.765c3.282%200%205.227%201.5%205.227%204.078c0%202.719-2.156%204.336-5.812%204.336Zm0%2014.18v-9.305h5.883c4.125%200%206.398%201.594%206.398%204.594c0%203.07-2.203%204.71-6.234%204.71Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/bold.svg?color=%231a73e8&size=48
