option icon
option from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- option
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
Use the option icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M17.57 6.52H6.297c-1.242 0-2.227.914-2.227 2.109s.985 2.133 2.227 2.133h10.289c.844 0 1.453.375 1.828 1.148l15.422 34.688c.867 1.968 2.297 2.883 4.477 2.883h11.414c1.218 0 2.203-.938 2.203-2.11s-.985-2.133-2.203-2.133h-10.36c-.96 0-1.547-.351-1.922-1.125L22.07 9.45c-.797-1.828-2.46-2.93-4.5-2.93m32.156 0H34.564c-1.243 0-2.204.89-2.204 2.085c0 1.196.961 2.11 2.203 2.11h15.165c1.242 0 2.18-.914 2.18-2.11s-.938-2.086-2.18-2.086"/></svg>
React
import type { SVGProps } from "react";
export function F7Option(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="M17.57 6.52H6.297c-1.242 0-2.227.914-2.227 2.109s.985 2.133 2.227 2.133h10.289c.844 0 1.453.375 1.828 1.148l15.422 34.688c.867 1.968 2.297 2.883 4.477 2.883h11.414c1.218 0 2.203-.938 2.203-2.11s-.985-2.133-2.203-2.133h-10.36c-.96 0-1.547-.351-1.922-1.125L22.07 9.45c-.797-1.828-2.46-2.93-4.5-2.93m32.156 0H34.564c-1.243 0-2.204.89-2.204 2.085c0 1.196.961 2.11 2.203 2.11h15.165c1.242 0 2.18-.914 2.18-2.11s-.938-2.086-2.18-2.086"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M17.57 6.52H6.297c-1.242 0-2.227.914-2.227 2.109s.985 2.133 2.227 2.133h10.289c.844 0 1.453.375 1.828 1.148l15.422 34.688c.867 1.968 2.297 2.883 4.477 2.883h11.414c1.218 0 2.203-.938 2.203-2.11s-.985-2.133-2.203-2.133h-10.36c-.96 0-1.547-.351-1.922-1.125L22.07 9.45c-.797-1.828-2.46-2.93-4.5-2.93m32.156 0H34.564c-1.243 0-2.204.89-2.204 2.085c0 1.196.961 2.11 2.203 2.11h15.165c1.242 0 2.18-.914 2.18-2.11s-.938-2.086-2.18-2.086"/></svg> </template>
CSS
.icon-option {
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%22M17.57%206.52H6.297c-1.242%200-2.227.914-2.227%202.109s.985%202.133%202.227%202.133h10.289c.844%200%201.453.375%201.828%201.148l15.422%2034.688c.867%201.968%202.297%202.883%204.477%202.883h11.414c1.218%200%202.203-.938%202.203-2.11s-.985-2.133-2.203-2.133h-10.36c-.96%200-1.547-.351-1.922-1.125L22.07%209.45c-.797-1.828-2.46-2.93-4.5-2.93m32.156%200H34.564c-1.243%200-2.204.89-2.204%202.085c0%201.196.961%202.11%202.203%202.11h15.165c1.242%200%202.18-.914%202.18-2.11s-.938-2.086-2.18-2.086%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%22M17.57%206.52H6.297c-1.242%200-2.227.914-2.227%202.109s.985%202.133%202.227%202.133h10.289c.844%200%201.453.375%201.828%201.148l15.422%2034.688c.867%201.968%202.297%202.883%204.477%202.883h11.414c1.218%200%202.203-.938%202.203-2.11s-.985-2.133-2.203-2.133h-10.36c-.96%200-1.547-.351-1.922-1.125L22.07%209.45c-.797-1.828-2.46-2.93-4.5-2.93m32.156%200H34.564c-1.243%200-2.204.89-2.204%202.085c0%201.196.961%202.11%202.203%202.11h15.165c1.242%200%202.18-.914%202.18-2.11s-.938-2.086-2.18-2.086%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/option.svg?color=%231a73e8&size=48
