# pepper icon Pepper. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/pepper - Category: Food & drink - Use it for: spicy, chili pepper, chili, chilli, spiciness - Tags: pepper, chili, chili-pepper, chilli, jalapeno, hot-pepper, spicy, hot, spice, heat, vegetable, mexican, food - Component name: PepperIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { PepperIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## Don't confuse with - `flame`: flame owns hot and trending ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/pepper.svg · PNG https://gentleface.com/png/line-round/16/pepper.png · https://gentleface.com/png/line-round/32/pepper.png · https://gentleface.com/png/line-round/48/pepper.png - line-soft: https://gentleface.com/svg/line-soft/16/pepper.svg · PNG https://gentleface.com/png/line-soft/16/pepper.png · https://gentleface.com/png/line-soft/32/pepper.png · https://gentleface.com/png/line-soft/48/pepper.png - line-sharp: https://gentleface.com/svg/line-sharp/16/pepper.svg · PNG https://gentleface.com/png/line-sharp/16/pepper.png · https://gentleface.com/png/line-sharp/32/pepper.png · https://gentleface.com/png/line-sharp/48/pepper.png - solid-round: https://gentleface.com/svg/solid-round/16/pepper.svg · PNG https://gentleface.com/png/solid-round/16/pepper.png · https://gentleface.com/png/solid-round/32/pepper.png · https://gentleface.com/png/solid-round/48/pepper.png - solid-soft: https://gentleface.com/svg/solid-soft/16/pepper.svg · PNG https://gentleface.com/png/solid-soft/16/pepper.png · https://gentleface.com/png/solid-soft/32/pepper.png · https://gentleface.com/png/solid-soft/48/pepper.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/pepper.svg · PNG https://gentleface.com/png/solid-sharp/16/pepper.png · https://gentleface.com/png/solid-sharp/32/pepper.png · https://gentleface.com/png/solid-sharp/48/pepper.png The SVG of every style: https://gentleface.com/icons/pepper.json (`svg`). ## Code (line-round) The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "pepper" (line-round), MIT. https://gentleface.com/icons/pepper import type { SVGProps } from 'react'; export function PepperIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "pepper" (line-round), MIT. https://gentleface.com/icons/pepper. Takes the text color. */ .icon-pepper { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M13.189 3.921C13.73 4.539 14 5.399 14 6.5C14 7.418 13.756 8.332 13.269 9.244C12.841 10.045 12.241 10.813 11.47 11.549C10.777 12.21 9.993 12.803 9.116 13.328C8.291 13.821 7.472 14.203 6.658 14.474C5.959 14.707 5.085 14.861 4.036 14.936C3.44 14.979 2.595 15 1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5C1 14.404 1.025 14.317 1.074 14.237C1.124 14.157 1.191 14.096 1.276 14.053C2.45 13.466 3.472 12.873 4.342 12.275C5.417 11.536 6.164 10.852 6.584 10.223C7.106 9.439 7.465 8.803 7.661 8.314C7.887 7.749 8 7.144 8 6.5C8 5.399 8.27 4.539 8.811 3.921C9.08 3.613 9.405 3.381 9.787 3.225C10.015 3.131 10.259 3.067 10.518 3.032C10.532 2.865 10.553 2.712 10.583 2.574C10.646 2.275 10.75 2.021 10.894 1.812C11.186 1.388 11.657 1.132 12.308 1.042C12.445 1.023 12.568 1.056 12.678 1.139C12.788 1.222 12.853 1.332 12.871 1.469C12.89 1.606 12.858 1.729 12.775 1.839C12.691 1.949 12.581 2.014 12.444 2.033C12.085 2.082 11.843 2.198 11.718 2.379C11.619 2.523 11.554 2.742 11.522 3.037C11.766 3.073 11.997 3.136 12.213 3.225C12.595 3.381 12.92 3.613 13.189 3.921ZM11 7.125C11.372 7.125 11.737 7.046 12.094 6.887C12.412 6.746 12.712 6.547 12.996 6.29C12.967 5.543 12.78 4.973 12.436 4.579C12.098 4.193 11.62 4 11 4C10.38 4 9.902 4.193 9.564 4.579C9.22 4.973 9.033 5.543 9.004 6.29C9.288 6.547 9.588 6.746 9.906 6.887C10.263 7.046 10.628 7.125 11 7.125ZM8.09 9.701C7.918 10.003 7.693 10.362 7.416 10.777C6.925 11.513 6.089 12.288 4.908 13.1C4.487 13.389 4.033 13.677 3.545 13.963C3.697 13.956 3.837 13.948 3.964 13.939C4.93 13.87 5.723 13.732 6.342 13.526C7.087 13.277 7.84 12.925 8.603 12.469C9.415 11.983 10.141 11.436 10.78 10.826C11.473 10.164 12.009 9.479 12.387 8.772C12.592 8.388 12.746 8.006 12.848 7.626C12.734 7.69 12.618 7.748 12.5 7.801C12.013 8.017 11.513 8.125 11 8.125C10.487 8.125 9.987 8.017 9.5 7.801C9.301 7.712 9.108 7.607 8.922 7.486C8.854 7.9 8.744 8.3 8.589 8.686C8.463 9.002 8.296 9.341 8.09 9.701Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M13.189 3.921C13.73 4.539 14 5.399 14 6.5C14 7.418 13.756 8.332 13.269 9.244C12.841 10.045 12.241 10.813 11.47 11.549C10.777 12.21 9.993 12.803 9.116 13.328C8.291 13.821 7.472 14.203 6.658 14.474C5.959 14.707 5.085 14.861 4.036 14.936C3.44 14.979 2.595 15 1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5C1 14.404 1.025 14.317 1.074 14.237C1.124 14.157 1.191 14.096 1.276 14.053C2.45 13.466 3.472 12.873 4.342 12.275C5.417 11.536 6.164 10.852 6.584 10.223C7.106 9.439 7.465 8.803 7.661 8.314C7.887 7.749 8 7.144 8 6.5C8 5.399 8.27 4.539 8.811 3.921C9.08 3.613 9.405 3.381 9.787 3.225C10.015 3.131 10.259 3.067 10.518 3.032C10.532 2.865 10.553 2.712 10.583 2.574C10.646 2.275 10.75 2.021 10.894 1.812C11.186 1.388 11.657 1.132 12.308 1.042C12.445 1.023 12.568 1.056 12.678 1.139C12.788 1.222 12.853 1.332 12.871 1.469C12.89 1.606 12.858 1.729 12.775 1.839C12.691 1.949 12.581 2.014 12.444 2.033C12.085 2.082 11.843 2.198 11.718 2.379C11.619 2.523 11.554 2.742 11.522 3.037C11.766 3.073 11.997 3.136 12.213 3.225C12.595 3.381 12.92 3.613 13.189 3.921ZM11 7.125C11.372 7.125 11.737 7.046 12.094 6.887C12.412 6.746 12.712 6.547 12.996 6.29C12.967 5.543 12.78 4.973 12.436 4.579C12.098 4.193 11.62 4 11 4C10.38 4 9.902 4.193 9.564 4.579C9.22 4.973 9.033 5.543 9.004 6.29C9.288 6.547 9.588 6.746 9.906 6.887C10.263 7.046 10.628 7.125 11 7.125ZM8.09 9.701C7.918 10.003 7.693 10.362 7.416 10.777C6.925 11.513 6.089 12.288 4.908 13.1C4.487 13.389 4.033 13.677 3.545 13.963C3.697 13.956 3.837 13.948 3.964 13.939C4.93 13.87 5.723 13.732 6.342 13.526C7.087 13.277 7.84 12.925 8.603 12.469C9.415 11.983 10.141 11.436 10.78 10.826C11.473 10.164 12.009 9.479 12.387 8.772C12.592 8.388 12.746 8.006 12.848 7.626C12.734 7.69 12.618 7.748 12.5 7.801C12.013 8.017 11.513 8.125 11 8.125C10.487 8.125 9.987 8.017 9.5 7.801C9.301 7.712 9.108 7.607 8.922 7.486C8.854 7.9 8.744 8.3 8.589 8.686C8.463 9.002 8.296 9.341 8.09 9.701Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M13.189 3.921C13.73 4.539 14 5.399 14 6.5C14 7.418 13.756 8.332 13.269 9.244C12.841 10.045 12.241 10.813 11.47 11.549C10.777 12.21 9.993 12.803 9.116 13.328C8.291 13.821 7.472 14.203 6.658 14.474C5.959 14.707 5.085 14.861 4.036 14.936C3.44 14.979 2.595 15 1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5C1 14.404 1.025 14.317 1.074 14.237C1.124 14.157 1.191 14.096 1.276 14.053C2.45 13.466 3.472 12.873 4.342 12.275C5.417 11.536 6.164 10.852 6.584 10.223C7.106 9.439 7.465 8.803 7.661 8.314C7.887 7.749 8 7.144 8 6.5C8 5.399 8.27 4.539 8.811 3.921C9.08 3.613 9.405 3.381 9.787 3.225C10.015 3.131 10.259 3.067 10.518 3.032C10.532 2.865 10.553 2.712 10.583 2.574C10.646 2.275 10.75 2.021 10.894 1.812C11.186 1.388 11.657 1.132 12.308 1.042C12.445 1.023 12.568 1.056 12.678 1.139C12.788 1.222 12.853 1.332 12.871 1.469C12.89 1.606 12.858 1.729 12.775 1.839C12.691 1.949 12.581 2.014 12.444 2.033C12.085 2.082 11.843 2.198 11.718 2.379C11.619 2.523 11.554 2.742 11.522 3.037C11.766 3.073 11.997 3.136 12.213 3.225C12.595 3.381 12.92 3.613 13.189 3.921ZM11 7.125C11.372 7.125 11.737 7.046 12.094 6.887C12.412 6.746 12.712 6.547 12.996 6.29C12.967 5.543 12.78 4.973 12.436 4.579C12.098 4.193 11.62 4 11 4C10.38 4 9.902 4.193 9.564 4.579C9.22 4.973 9.033 5.543 9.004 6.29C9.288 6.547 9.588 6.746 9.906 6.887C10.263 7.046 10.628 7.125 11 7.125ZM8.09 9.701C7.918 10.003 7.693 10.362 7.416 10.777C6.925 11.513 6.089 12.288 4.908 13.1C4.487 13.389 4.033 13.677 3.545 13.963C3.697 13.956 3.837 13.948 3.964 13.939C4.93 13.87 5.723 13.732 6.342 13.526C7.087 13.277 7.84 12.925 8.603 12.469C9.415 11.983 10.141 11.436 10.78 10.826C11.473 10.164 12.009 9.479 12.387 8.772C12.592 8.388 12.746 8.006 12.848 7.626C12.734 7.69 12.618 7.748 12.5 7.801C12.013 8.017 11.513 8.125 11 8.125C10.487 8.125 9.987 8.017 9.5 7.801C9.301 7.712 9.108 7.607 8.922 7.486C8.854 7.9 8.744 8.3 8.589 8.686C8.463 9.002 8.296 9.341 8.09 9.701Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "pepper" (line-round), MIT. https://gentleface.com/icons/pepper import SwiftUI struct PepperIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 13.189, y: 3.921)) p.addCurve(to: CGPoint(x: 14, y: 6.5), control1: CGPoint(x: 13.73, y: 4.539), control2: CGPoint(x: 14, y: 5.399)) p.addCurve(to: CGPoint(x: 13.269, y: 9.244), control1: CGPoint(x: 14, y: 7.418), control2: CGPoint(x: 13.756, y: 8.332)) p.addCurve(to: CGPoint(x: 11.47, y: 11.549), control1: CGPoint(x: 12.841, y: 10.045), control2: CGPoint(x: 12.241, y: 10.813)) p.addCurve(to: CGPoint(x: 9.116, y: 13.328), control1: CGPoint(x: 10.777, y: 12.21), control2: CGPoint(x: 9.993, y: 12.803)) p.addCurve(to: CGPoint(x: 6.658, y: 14.474), control1: CGPoint(x: 8.291, y: 13.821), control2: CGPoint(x: 7.472, y: 14.203)) p.addCurve(to: CGPoint(x: 4.036, y: 14.936), control1: CGPoint(x: 5.959, y: 14.707), control2: CGPoint(x: 5.085, y: 14.861)) p.addCurve(to: CGPoint(x: 1.5, y: 15), control1: CGPoint(x: 3.44, y: 14.979), control2: CGPoint(x: 2.595, y: 15)) p.addCurve(to: CGPoint(x: 1.144, y: 14.856), control1: CGPoint(x: 1.359, y: 15), control2: CGPoint(x: 1.241, y: 14.952)) p.addCurve(to: CGPoint(x: 1, y: 14.5), control1: CGPoint(x: 1.048, y: 14.759), control2: CGPoint(x: 1, y: 14.641)) p.addCurve(to: CGPoint(x: 1.074, y: 14.237), control1: CGPoint(x: 1, y: 14.404), control2: CGPoint(x: 1.025, y: 14.317)) p.addCurve(to: CGPoint(x: 1.276, y: 14.053), control1: CGPoint(x: 1.124, y: 14.157), control2: CGPoint(x: 1.191, y: 14.096)) p.addCurve(to: CGPoint(x: 4.342, y: 12.275), control1: CGPoint(x: 2.45, y: 13.466), control2: CGPoint(x: 3.472, y: 12.873)) p.addCurve(to: CGPoint(x: 6.584, y: 10.223), control1: CGPoint(x: 5.417, y: 11.536), control2: CGPoint(x: 6.164, y: 10.852)) p.addCurve(to: CGPoint(x: 7.661, y: 8.314), control1: CGPoint(x: 7.106, y: 9.439), control2: CGPoint(x: 7.465, y: 8.803)) p.addCurve(to: CGPoint(x: 8, y: 6.5), control1: CGPoint(x: 7.887, y: 7.749), control2: CGPoint(x: 8, y: 7.144)) p.addCurve(to: CGPoint(x: 8.811, y: 3.921), control1: CGPoint(x: 8, y: 5.399), control2: CGPoint(x: 8.27, y: 4.539)) p.addCurve(to: CGPoint(x: 9.787, y: 3.225), control1: CGPoint(x: 9.08, y: 3.613), control2: CGPoint(x: 9.405, y: 3.381)) p.addCurve(to: CGPoint(x: 10.518, y: 3.032), control1: CGPoint(x: 10.015, y: 3.131), control2: CGPoint(x: 10.259, y: 3.067)) p.addCurve(to: CGPoint(x: 10.583, y: 2.574), control1: CGPoint(x: 10.532, y: 2.865), control2: CGPoint(x: 10.553, y: 2.712)) p.addCurve(to: CGPoint(x: 10.894, y: 1.812), control1: CGPoint(x: 10.646, y: 2.275), control2: CGPoint(x: 10.75, y: 2.021)) p.addCurve(to: CGPoint(x: 12.308, y: 1.042), control1: CGPoint(x: 11.186, y: 1.388), control2: CGPoint(x: 11.657, y: 1.132)) p.addCurve(to: CGPoint(x: 12.678, y: 1.139), control1: CGPoint(x: 12.445, y: 1.023), control2: CGPoint(x: 12.568, y: 1.056)) p.addCurve(to: CGPoint(x: 12.871, y: 1.469), control1: CGPoint(x: 12.788, y: 1.222), control2: CGPoint(x: 12.853, y: 1.332)) p.addCurve(to: CGPoint(x: 12.775, y: 1.839), control1: CGPoint(x: 12.89, y: 1.606), control2: CGPoint(x: 12.858, y: 1.729)) p.addCurve(to: CGPoint(x: 12.444, y: 2.033), control1: CGPoint(x: 12.691, y: 1.949), control2: CGPoint(x: 12.581, y: 2.014)) p.addCurve(to: CGPoint(x: 11.718, y: 2.379), control1: CGPoint(x: 12.085, y: 2.082), control2: CGPoint(x: 11.843, y: 2.198)) p.addCurve(to: CGPoint(x: 11.522, y: 3.037), control1: CGPoint(x: 11.619, y: 2.523), control2: CGPoint(x: 11.554, y: 2.742)) p.addCurve(to: CGPoint(x: 12.213, y: 3.225), control1: CGPoint(x: 11.766, y: 3.073), control2: CGPoint(x: 11.997, y: 3.136)) p.addCurve(to: CGPoint(x: 13.189, y: 3.921), control1: CGPoint(x: 12.595, y: 3.381), control2: CGPoint(x: 12.92, y: 3.613)) p.closeSubpath() p.move(to: CGPoint(x: 11, y: 7.125)) p.addCurve(to: CGPoint(x: 12.094, y: 6.887), control1: CGPoint(x: 11.372, y: 7.125), control2: CGPoint(x: 11.737, y: 7.046)) p.addCurve(to: CGPoint(x: 12.996, y: 6.29), control1: CGPoint(x: 12.412, y: 6.746), control2: CGPoint(x: 12.712, y: 6.547)) p.addCurve(to: CGPoint(x: 12.436, y: 4.579), control1: CGPoint(x: 12.967, y: 5.543), control2: CGPoint(x: 12.78, y: 4.973)) p.addCurve(to: CGPoint(x: 11, y: 4), control1: CGPoint(x: 12.098, y: 4.193), control2: CGPoint(x: 11.62, y: 4)) p.addCurve(to: CGPoint(x: 9.564, y: 4.579), control1: CGPoint(x: 10.38, y: 4), control2: CGPoint(x: 9.902, y: 4.193)) p.addCurve(to: CGPoint(x: 9.004, y: 6.29), control1: CGPoint(x: 9.22, y: 4.973), control2: CGPoint(x: 9.033, y: 5.543)) p.addCurve(to: CGPoint(x: 9.906, y: 6.887), control1: CGPoint(x: 9.288, y: 6.547), control2: CGPoint(x: 9.588, y: 6.746)) p.addCurve(to: CGPoint(x: 11, y: 7.125), control1: CGPoint(x: 10.263, y: 7.046), control2: CGPoint(x: 10.628, y: 7.125)) p.closeSubpath() p.move(to: CGPoint(x: 8.09, y: 9.701)) p.addCurve(to: CGPoint(x: 7.416, y: 10.777), control1: CGPoint(x: 7.918, y: 10.003), control2: CGPoint(x: 7.693, y: 10.362)) p.addCurve(to: CGPoint(x: 4.908, y: 13.1), control1: CGPoint(x: 6.925, y: 11.513), control2: CGPoint(x: 6.089, y: 12.288)) p.addCurve(to: CGPoint(x: 3.545, y: 13.963), control1: CGPoint(x: 4.487, y: 13.389), control2: CGPoint(x: 4.033, y: 13.677)) p.addCurve(to: CGPoint(x: 3.964, y: 13.939), control1: CGPoint(x: 3.697, y: 13.956), control2: CGPoint(x: 3.837, y: 13.948)) p.addCurve(to: CGPoint(x: 6.342, y: 13.526), control1: CGPoint(x: 4.93, y: 13.87), control2: CGPoint(x: 5.723, y: 13.732)) p.addCurve(to: CGPoint(x: 8.603, y: 12.469), control1: CGPoint(x: 7.087, y: 13.277), control2: CGPoint(x: 7.84, y: 12.925)) p.addCurve(to: CGPoint(x: 10.78, y: 10.826), control1: CGPoint(x: 9.415, y: 11.983), control2: CGPoint(x: 10.141, y: 11.436)) p.addCurve(to: CGPoint(x: 12.387, y: 8.772), control1: CGPoint(x: 11.473, y: 10.164), control2: CGPoint(x: 12.009, y: 9.479)) p.addCurve(to: CGPoint(x: 12.848, y: 7.626), control1: CGPoint(x: 12.592, y: 8.388), control2: CGPoint(x: 12.746, y: 8.006)) p.addCurve(to: CGPoint(x: 12.5, y: 7.801), control1: CGPoint(x: 12.734, y: 7.69), control2: CGPoint(x: 12.618, y: 7.748)) p.addCurve(to: CGPoint(x: 11, y: 8.125), control1: CGPoint(x: 12.013, y: 8.017), control2: CGPoint(x: 11.513, y: 8.125)) p.addCurve(to: CGPoint(x: 9.5, y: 7.801), control1: CGPoint(x: 10.487, y: 8.125), control2: CGPoint(x: 9.987, y: 8.017)) p.addCurve(to: CGPoint(x: 8.922, y: 7.486), control1: CGPoint(x: 9.301, y: 7.712), control2: CGPoint(x: 9.108, y: 7.607)) p.addCurve(to: CGPoint(x: 8.589, y: 8.686), control1: CGPoint(x: 8.854, y: 7.9), control2: CGPoint(x: 8.744, y: 8.3)) p.addCurve(to: CGPoint(x: 8.09, y: 9.701), control1: CGPoint(x: 8.463, y: 9.002), control2: CGPoint(x: 8.296, y: 9.341)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // PepperIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "pepper" (line-round), MIT. https://gentleface.com/icons/pepper import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val PepperIcon: ImageVector by lazy { ImageVector.Builder( name = "pepper", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M13.189 3.921C13.73 4.539 14 5.399 14 6.5C14 7.418 13.756 8.332 13.269 9.244C12.841 10.045 12.241 10.813 11.47 11.549C10.777 12.21 9.993 12.803 9.116 13.328C8.291 13.821 7.472 14.203 6.658 14.474C5.959 14.707 5.085 14.861 4.036 14.936C3.44 14.979 2.595 15 1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5C1 14.404 1.025 14.317 1.074 14.237C1.124 14.157 1.191 14.096 1.276 14.053C2.45 13.466 3.472 12.873 4.342 12.275C5.417 11.536 6.164 10.852 6.584 10.223C7.106 9.439 7.465 8.803 7.661 8.314C7.887 7.749 8 7.144 8 6.5C8 5.399 8.27 4.539 8.811 3.921C9.08 3.613 9.405 3.381 9.787 3.225C10.015 3.131 10.259 3.067 10.518 3.032C10.532 2.865 10.553 2.712 10.583 2.574C10.646 2.275 10.75 2.021 10.894 1.812C11.186 1.388 11.657 1.132 12.308 1.042C12.445 1.023 12.568 1.056 12.678 1.139C12.788 1.222 12.853 1.332 12.871 1.469C12.89 1.606 12.858 1.729 12.775 1.839C12.691 1.949 12.581 2.014 12.444 2.033C12.085 2.082 11.843 2.198 11.718 2.379C11.619 2.523 11.554 2.742 11.522 3.037C11.766 3.073 11.997 3.136 12.213 3.225C12.595 3.381 12.92 3.613 13.189 3.921ZM11 7.125C11.372 7.125 11.737 7.046 12.094 6.887C12.412 6.746 12.712 6.547 12.996 6.29C12.967 5.543 12.78 4.973 12.436 4.579C12.098 4.193 11.62 4 11 4C10.38 4 9.902 4.193 9.564 4.579C9.22 4.973 9.033 5.543 9.004 6.29C9.288 6.547 9.588 6.746 9.906 6.887C10.263 7.046 10.628 7.125 11 7.125ZM8.09 9.701C7.918 10.003 7.693 10.362 7.416 10.777C6.925 11.513 6.089 12.288 4.908 13.1C4.487 13.389 4.033 13.677 3.545 13.963C3.697 13.956 3.837 13.948 3.964 13.939C4.93 13.87 5.723 13.732 6.342 13.526C7.087 13.277 7.84 12.925 8.603 12.469C9.415 11.983 10.141 11.436 10.78 10.826C11.473 10.164 12.009 9.479 12.387 8.772C12.592 8.388 12.746 8.006 12.848 7.626C12.734 7.69 12.618 7.748 12.5 7.801C12.013 8.017 11.513 8.125 11 8.125C10.487 8.125 9.987 8.017 9.5 7.801C9.301 7.712 9.108 7.607 8.922 7.486C8.854 7.9 8.744 8.3 8.589 8.686C8.463 9.002 8.296 9.341 8.09 9.701Z"), fill = SolidColor(Color.Black), ).build() } // Icon(PepperIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "pepper" (line-round), MIT. https://gentleface.com/icons/pepper import 'package:flutter/widgets.dart'; class PepperIcon extends StatelessWidget { const PepperIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _PepperIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _PepperIconPainter extends CustomPainter { _PepperIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(13.189, 3.921) ..cubicTo(13.73, 4.539, 14, 5.399, 14, 6.5) ..cubicTo(14, 7.418, 13.756, 8.332, 13.269, 9.244) ..cubicTo(12.841, 10.045, 12.241, 10.813, 11.47, 11.549) ..cubicTo(10.777, 12.21, 9.993, 12.803, 9.116, 13.328) ..cubicTo(8.291, 13.821, 7.472, 14.203, 6.658, 14.474) ..cubicTo(5.959, 14.707, 5.085, 14.861, 4.036, 14.936) ..cubicTo(3.44, 14.979, 2.595, 15, 1.5, 15) ..cubicTo(1.359, 15, 1.241, 14.952, 1.144, 14.856) ..cubicTo(1.048, 14.759, 1, 14.641, 1, 14.5) ..cubicTo(1, 14.404, 1.025, 14.317, 1.074, 14.237) ..cubicTo(1.124, 14.157, 1.191, 14.096, 1.276, 14.053) ..cubicTo(2.45, 13.466, 3.472, 12.873, 4.342, 12.275) ..cubicTo(5.417, 11.536, 6.164, 10.852, 6.584, 10.223) ..cubicTo(7.106, 9.439, 7.465, 8.803, 7.661, 8.314) ..cubicTo(7.887, 7.749, 8, 7.144, 8, 6.5) ..cubicTo(8, 5.399, 8.27, 4.539, 8.811, 3.921) ..cubicTo(9.08, 3.613, 9.405, 3.381, 9.787, 3.225) ..cubicTo(10.015, 3.131, 10.259, 3.067, 10.518, 3.032) ..cubicTo(10.532, 2.865, 10.553, 2.712, 10.583, 2.574) ..cubicTo(10.646, 2.275, 10.75, 2.021, 10.894, 1.812) ..cubicTo(11.186, 1.388, 11.657, 1.132, 12.308, 1.042) ..cubicTo(12.445, 1.023, 12.568, 1.056, 12.678, 1.139) ..cubicTo(12.788, 1.222, 12.853, 1.332, 12.871, 1.469) ..cubicTo(12.89, 1.606, 12.858, 1.729, 12.775, 1.839) ..cubicTo(12.691, 1.949, 12.581, 2.014, 12.444, 2.033) ..cubicTo(12.085, 2.082, 11.843, 2.198, 11.718, 2.379) ..cubicTo(11.619, 2.523, 11.554, 2.742, 11.522, 3.037) ..cubicTo(11.766, 3.073, 11.997, 3.136, 12.213, 3.225) ..cubicTo(12.595, 3.381, 12.92, 3.613, 13.189, 3.921) ..close() ..moveTo(11, 7.125) ..cubicTo(11.372, 7.125, 11.737, 7.046, 12.094, 6.887) ..cubicTo(12.412, 6.746, 12.712, 6.547, 12.996, 6.29) ..cubicTo(12.967, 5.543, 12.78, 4.973, 12.436, 4.579) ..cubicTo(12.098, 4.193, 11.62, 4, 11, 4) ..cubicTo(10.38, 4, 9.902, 4.193, 9.564, 4.579) ..cubicTo(9.22, 4.973, 9.033, 5.543, 9.004, 6.29) ..cubicTo(9.288, 6.547, 9.588, 6.746, 9.906, 6.887) ..cubicTo(10.263, 7.046, 10.628, 7.125, 11, 7.125) ..close() ..moveTo(8.09, 9.701) ..cubicTo(7.918, 10.003, 7.693, 10.362, 7.416, 10.777) ..cubicTo(6.925, 11.513, 6.089, 12.288, 4.908, 13.1) ..cubicTo(4.487, 13.389, 4.033, 13.677, 3.545, 13.963) ..cubicTo(3.697, 13.956, 3.837, 13.948, 3.964, 13.939) ..cubicTo(4.93, 13.87, 5.723, 13.732, 6.342, 13.526) ..cubicTo(7.087, 13.277, 7.84, 12.925, 8.603, 12.469) ..cubicTo(9.415, 11.983, 10.141, 11.436, 10.78, 10.826) ..cubicTo(11.473, 10.164, 12.009, 9.479, 12.387, 8.772) ..cubicTo(12.592, 8.388, 12.746, 8.006, 12.848, 7.626) ..cubicTo(12.734, 7.69, 12.618, 7.748, 12.5, 7.801) ..cubicTo(12.013, 8.017, 11.513, 8.125, 11, 8.125) ..cubicTo(10.487, 8.125, 9.987, 8.017, 9.5, 7.801) ..cubicTo(9.301, 7.712, 9.108, 7.607, 8.922, 7.486) ..cubicTo(8.854, 7.9, 8.744, 8.3, 8.589, 8.686) ..cubicTo(8.463, 9.002, 8.296, 9.341, 8.09, 9.701) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_PepperIconPainter old) => old.color != color; } ```