feather icon
feather from Material Design Icons by Pictogrammers · Filled · Nature · Apache-2.0 Free for personal and commercial use.
- Name
- feather
- Set
- Material Design Icons
- Style
- Filled
- Category
- Nature
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- quill
The same icon in other sets
featherBootstrap IconsfeatherFont Awesome 6 SolidfeatherFont Awesome SolidfeatherFeather IconsfeatherFluent EmojifeatherFluent Emoji FlatfeatherFluent Emoji High ContrastfeatherHuge IconsfeatherJam IconsfeatherLine AwesomefeatherLucidefeatherNoto EmojifeatherOpenMojifeatherPhosphorfeatherPixelarticonsfeatherTabler IconsfeatherTwitter Emoji
More nature icons from Material Design Icons
Use the feather icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 2s-7.64-.37-13.66 7.88C3.72 16.21 2 22 2 22l1.94-1c1.44-2.5 2.19-3.53 3.6-5c2.53.74 5.17.65 7.46-2c-2-.56-3.6-.43-5.96-.19C11.69 12 13.5 11.6 16 12l1-2c-1.8-.34-3-.37-4.78.04C14.19 8.65 15.56 7.87 18 8l1.21-1.93c-1.56-.11-2.5.06-4.29.5c1.61-1.46 3.08-2.12 5.22-2.25c0 0 1.05-1.89 1.86-2.32"/></svg>
React
import type { SVGProps } from "react";
export function MdiFeather(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 2s-7.64-.37-13.66 7.88C3.72 16.21 2 22 2 22l1.94-1c1.44-2.5 2.19-3.53 3.6-5c2.53.74 5.17.65 7.46-2c-2-.56-3.6-.43-5.96-.19C11.69 12 13.5 11.6 16 12l1-2c-1.8-.34-3-.37-4.78.04C14.19 8.65 15.56 7.87 18 8l1.21-1.93c-1.56-.11-2.5.06-4.29.5c1.61-1.46 3.08-2.12 5.22-2.25c0 0 1.05-1.89 1.86-2.32"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 2s-7.64-.37-13.66 7.88C3.72 16.21 2 22 2 22l1.94-1c1.44-2.5 2.19-3.53 3.6-5c2.53.74 5.17.65 7.46-2c-2-.56-3.6-.43-5.96-.19C11.69 12 13.5 11.6 16 12l1-2c-1.8-.34-3-.37-4.78.04C14.19 8.65 15.56 7.87 18 8l1.21-1.93c-1.56-.11-2.5.06-4.29.5c1.61-1.46 3.08-2.12 5.22-2.25c0 0 1.05-1.89 1.86-2.32"/></svg> </template>
CSS
.icon-feather {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22%202s-7.64-.37-13.66%207.88C3.72%2016.21%202%2022%202%2022l1.94-1c1.44-2.5%202.19-3.53%203.6-5c2.53.74%205.17.65%207.46-2c-2-.56-3.6-.43-5.96-.19C11.69%2012%2013.5%2011.6%2016%2012l1-2c-1.8-.34-3-.37-4.78.04C14.19%208.65%2015.56%207.87%2018%208l1.21-1.93c-1.56-.11-2.5.06-4.29.5c1.61-1.46%203.08-2.12%205.22-2.25c0%200%201.05-1.89%201.86-2.32%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22%202s-7.64-.37-13.66%207.88C3.72%2016.21%202%2022%202%2022l1.94-1c1.44-2.5%202.19-3.53%203.6-5c2.53.74%205.17.65%207.46-2c-2-.56-3.6-.43-5.96-.19C11.69%2012%2013.5%2011.6%2016%2012l1-2c-1.8-.34-3-.37-4.78.04C14.19%208.65%2015.56%207.87%2018%208l1.21-1.93c-1.56-.11-2.5.06-4.29.5c1.61-1.46%203.08-2.12%205.22-2.25c0%200%201.05-1.89%201.86-2.32%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/feather.svg?color=%231a73e8&size=48
