# ribbon icon Ribbon. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/ribbon - Category: Health & medical - Use it for: oncology, cancer care, awareness ribbon, awareness, support a cause - Tags: ribbon, awareness ribbon, awareness, cancer, oncology, cancer care, support, cause, charity, solidarity, campaign - Component name: RibbonIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { RibbonIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## 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/ribbon.svg · PNG https://gentleface.com/png/line-round/16/ribbon.png · https://gentleface.com/png/line-round/32/ribbon.png · https://gentleface.com/png/line-round/48/ribbon.png - line-soft: https://gentleface.com/svg/line-soft/16/ribbon.svg · PNG https://gentleface.com/png/line-soft/16/ribbon.png · https://gentleface.com/png/line-soft/32/ribbon.png · https://gentleface.com/png/line-soft/48/ribbon.png - line-sharp: https://gentleface.com/svg/line-sharp/16/ribbon.svg · PNG https://gentleface.com/png/line-sharp/16/ribbon.png · https://gentleface.com/png/line-sharp/32/ribbon.png · https://gentleface.com/png/line-sharp/48/ribbon.png - solid-round: https://gentleface.com/svg/solid-round/16/ribbon.svg · PNG https://gentleface.com/png/solid-round/16/ribbon.png · https://gentleface.com/png/solid-round/32/ribbon.png · https://gentleface.com/png/solid-round/48/ribbon.png - solid-soft: https://gentleface.com/svg/solid-soft/16/ribbon.svg · PNG https://gentleface.com/png/solid-soft/16/ribbon.png · https://gentleface.com/png/solid-soft/32/ribbon.png · https://gentleface.com/png/solid-soft/48/ribbon.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/ribbon.svg · PNG https://gentleface.com/png/solid-sharp/16/ribbon.png · https://gentleface.com/png/solid-sharp/32/ribbon.png · https://gentleface.com/png/solid-sharp/48/ribbon.png The SVG of every style: https://gentleface.com/icons/ribbon.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 "ribbon" (line-round), MIT. https://gentleface.com/icons/ribbon import type { SVGProps } from 'react'; export function RibbonIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "ribbon" (line-round), MIT. https://gentleface.com/icons/ribbon. Takes the text color. */ .icon-ribbon { 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='M8.843 6.459C8.927 6.348 9.057 6.192 9.233 5.989C9.494 5.688 9.672 5.458 9.767 5.299C9.922 5.036 10 4.77 10 4.5C10 4.309 9.953 4.125 9.86 3.948C9.758 3.755 9.609 3.586 9.414 3.439C9.219 3.293 8.993 3.182 8.736 3.105C8.5 3.035 8.254 3 8 3C7.746 3 7.5 3.035 7.264 3.105C7.007 3.182 6.781 3.293 6.586 3.439C6.391 3.586 6.242 3.755 6.14 3.948C6.047 4.125 6 4.309 6 4.5C6 4.784 6.127 5.145 6.38 5.583C6.531 5.843 6.801 6.241 7.191 6.776C7.403 7.068 7.556 7.282 7.649 7.419C7.803 7.647 7.92 7.84 8 8L9.5 11C9.75 11.5 10.188 12.167 10.813 13C11.167 13.472 11.501 13.891 11.815 14.257C11.885 14.338 11.924 14.442 11.924 14.55C11.924 14.799 11.723 15 11.474 15L9.809 15C9.713 15 9.626 14.975 9.546 14.926C9.466 14.876 9.405 14.809 9.362 14.724L5.5 7C5.389 6.778 5.185 6.444 4.889 6C4.593 5.556 4.389 5.222 4.278 5C4.093 4.63 4 4.296 4 4C4 3.619 4.094 3.25 4.281 2.896C4.484 2.511 4.781 2.172 5.172 1.879C5.562 1.586 6.014 1.363 6.528 1.211C7.001 1.07 7.491 1 8 1C8.509 1 8.999 1.07 9.472 1.211C9.986 1.363 10.438 1.586 10.828 1.879C11.219 2.172 11.516 2.511 11.719 2.896C11.906 3.25 12 3.619 12 4C12 4.296 11.907 4.63 11.722 5C11.611 5.222 11.407 5.556 11.111 6C10.815 6.444 10.611 6.778 10.5 7L9.947 8.106C9.904 8.191 9.843 8.258 9.763 8.308C9.683 8.357 9.596 8.382 9.5 8.382C9.404 8.382 9.317 8.357 9.237 8.308C9.157 8.258 9.096 8.191 9.053 8.106L8.606 7.212C8.537 7.073 8.544 6.908 8.625 6.776C8.689 6.672 8.761 6.566 8.843 6.459ZM4.185 14.257C4.499 13.891 4.833 13.472 5.188 13C5.552 12.514 5.854 12.083 6.092 11.708C6.136 11.639 6.197 11.584 6.27 11.547C6.493 11.436 6.763 11.526 6.874 11.748L7.388 12.776C7.463 12.925 7.463 13.075 7.388 13.224L6.638 14.724C6.595 14.809 6.534 14.876 6.454 14.926C6.374 14.975 6.287 15 6.191 15L4.526 15C4.418 15 4.314 14.961 4.233 14.891C4.044 14.729 4.023 14.445 4.185 14.257Z'/%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='M8.843 6.459C8.927 6.348 9.057 6.192 9.233 5.989C9.494 5.688 9.672 5.458 9.767 5.299C9.922 5.036 10 4.77 10 4.5C10 4.309 9.953 4.125 9.86 3.948C9.758 3.755 9.609 3.586 9.414 3.439C9.219 3.293 8.993 3.182 8.736 3.105C8.5 3.035 8.254 3 8 3C7.746 3 7.5 3.035 7.264 3.105C7.007 3.182 6.781 3.293 6.586 3.439C6.391 3.586 6.242 3.755 6.14 3.948C6.047 4.125 6 4.309 6 4.5C6 4.784 6.127 5.145 6.38 5.583C6.531 5.843 6.801 6.241 7.191 6.776C7.403 7.068 7.556 7.282 7.649 7.419C7.803 7.647 7.92 7.84 8 8L9.5 11C9.75 11.5 10.188 12.167 10.813 13C11.167 13.472 11.501 13.891 11.815 14.257C11.885 14.338 11.924 14.442 11.924 14.55C11.924 14.799 11.723 15 11.474 15L9.809 15C9.713 15 9.626 14.975 9.546 14.926C9.466 14.876 9.405 14.809 9.362 14.724L5.5 7C5.389 6.778 5.185 6.444 4.889 6C4.593 5.556 4.389 5.222 4.278 5C4.093 4.63 4 4.296 4 4C4 3.619 4.094 3.25 4.281 2.896C4.484 2.511 4.781 2.172 5.172 1.879C5.562 1.586 6.014 1.363 6.528 1.211C7.001 1.07 7.491 1 8 1C8.509 1 8.999 1.07 9.472 1.211C9.986 1.363 10.438 1.586 10.828 1.879C11.219 2.172 11.516 2.511 11.719 2.896C11.906 3.25 12 3.619 12 4C12 4.296 11.907 4.63 11.722 5C11.611 5.222 11.407 5.556 11.111 6C10.815 6.444 10.611 6.778 10.5 7L9.947 8.106C9.904 8.191 9.843 8.258 9.763 8.308C9.683 8.357 9.596 8.382 9.5 8.382C9.404 8.382 9.317 8.357 9.237 8.308C9.157 8.258 9.096 8.191 9.053 8.106L8.606 7.212C8.537 7.073 8.544 6.908 8.625 6.776C8.689 6.672 8.761 6.566 8.843 6.459ZM4.185 14.257C4.499 13.891 4.833 13.472 5.188 13C5.552 12.514 5.854 12.083 6.092 11.708C6.136 11.639 6.197 11.584 6.27 11.547C6.493 11.436 6.763 11.526 6.874 11.748L7.388 12.776C7.463 12.925 7.463 13.075 7.388 13.224L6.638 14.724C6.595 14.809 6.534 14.876 6.454 14.926C6.374 14.975 6.287 15 6.191 15L4.526 15C4.418 15 4.314 14.961 4.233 14.891C4.044 14.729 4.023 14.445 4.185 14.257Z'/%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='M8.843 6.459C8.927 6.348 9.057 6.192 9.233 5.989C9.494 5.688 9.672 5.458 9.767 5.299C9.922 5.036 10 4.77 10 4.5C10 4.309 9.953 4.125 9.86 3.948C9.758 3.755 9.609 3.586 9.414 3.439C9.219 3.293 8.993 3.182 8.736 3.105C8.5 3.035 8.254 3 8 3C7.746 3 7.5 3.035 7.264 3.105C7.007 3.182 6.781 3.293 6.586 3.439C6.391 3.586 6.242 3.755 6.14 3.948C6.047 4.125 6 4.309 6 4.5C6 4.784 6.127 5.145 6.38 5.583C6.531 5.843 6.801 6.241 7.191 6.776C7.403 7.068 7.556 7.282 7.649 7.419C7.803 7.647 7.92 7.84 8 8L9.5 11C9.75 11.5 10.188 12.167 10.813 13C11.167 13.472 11.501 13.891 11.815 14.257C11.885 14.338 11.924 14.442 11.924 14.55C11.924 14.799 11.723 15 11.474 15L9.809 15C9.713 15 9.626 14.975 9.546 14.926C9.466 14.876 9.405 14.809 9.362 14.724L5.5 7C5.389 6.778 5.185 6.444 4.889 6C4.593 5.556 4.389 5.222 4.278 5C4.093 4.63 4 4.296 4 4C4 3.619 4.094 3.25 4.281 2.896C4.484 2.511 4.781 2.172 5.172 1.879C5.562 1.586 6.014 1.363 6.528 1.211C7.001 1.07 7.491 1 8 1C8.509 1 8.999 1.07 9.472 1.211C9.986 1.363 10.438 1.586 10.828 1.879C11.219 2.172 11.516 2.511 11.719 2.896C11.906 3.25 12 3.619 12 4C12 4.296 11.907 4.63 11.722 5C11.611 5.222 11.407 5.556 11.111 6C10.815 6.444 10.611 6.778 10.5 7L9.947 8.106C9.904 8.191 9.843 8.258 9.763 8.308C9.683 8.357 9.596 8.382 9.5 8.382C9.404 8.382 9.317 8.357 9.237 8.308C9.157 8.258 9.096 8.191 9.053 8.106L8.606 7.212C8.537 7.073 8.544 6.908 8.625 6.776C8.689 6.672 8.761 6.566 8.843 6.459ZM4.185 14.257C4.499 13.891 4.833 13.472 5.188 13C5.552 12.514 5.854 12.083 6.092 11.708C6.136 11.639 6.197 11.584 6.27 11.547C6.493 11.436 6.763 11.526 6.874 11.748L7.388 12.776C7.463 12.925 7.463 13.075 7.388 13.224L6.638 14.724C6.595 14.809 6.534 14.876 6.454 14.926C6.374 14.975 6.287 15 6.191 15L4.526 15C4.418 15 4.314 14.961 4.233 14.891C4.044 14.729 4.023 14.445 4.185 14.257Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "ribbon" (line-round), MIT. https://gentleface.com/icons/ribbon import SwiftUI struct RibbonIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 8.843, y: 6.459)) p.addCurve(to: CGPoint(x: 9.233, y: 5.989), control1: CGPoint(x: 8.927, y: 6.348), control2: CGPoint(x: 9.057, y: 6.192)) p.addCurve(to: CGPoint(x: 9.767, y: 5.299), control1: CGPoint(x: 9.494, y: 5.688), control2: CGPoint(x: 9.672, y: 5.458)) p.addCurve(to: CGPoint(x: 10, y: 4.5), control1: CGPoint(x: 9.922, y: 5.036), control2: CGPoint(x: 10, y: 4.77)) p.addCurve(to: CGPoint(x: 9.86, y: 3.948), control1: CGPoint(x: 10, y: 4.309), control2: CGPoint(x: 9.953, y: 4.125)) p.addCurve(to: CGPoint(x: 9.414, y: 3.439), control1: CGPoint(x: 9.758, y: 3.755), control2: CGPoint(x: 9.609, y: 3.586)) p.addCurve(to: CGPoint(x: 8.736, y: 3.105), control1: CGPoint(x: 9.219, y: 3.293), control2: CGPoint(x: 8.993, y: 3.182)) p.addCurve(to: CGPoint(x: 8, y: 3), control1: CGPoint(x: 8.5, y: 3.035), control2: CGPoint(x: 8.254, y: 3)) p.addCurve(to: CGPoint(x: 7.264, y: 3.105), control1: CGPoint(x: 7.746, y: 3), control2: CGPoint(x: 7.5, y: 3.035)) p.addCurve(to: CGPoint(x: 6.586, y: 3.439), control1: CGPoint(x: 7.007, y: 3.182), control2: CGPoint(x: 6.781, y: 3.293)) p.addCurve(to: CGPoint(x: 6.14, y: 3.948), control1: CGPoint(x: 6.391, y: 3.586), control2: CGPoint(x: 6.242, y: 3.755)) p.addCurve(to: CGPoint(x: 6, y: 4.5), control1: CGPoint(x: 6.047, y: 4.125), control2: CGPoint(x: 6, y: 4.309)) p.addCurve(to: CGPoint(x: 6.38, y: 5.583), control1: CGPoint(x: 6, y: 4.784), control2: CGPoint(x: 6.127, y: 5.145)) p.addCurve(to: CGPoint(x: 7.191, y: 6.776), control1: CGPoint(x: 6.531, y: 5.843), control2: CGPoint(x: 6.801, y: 6.241)) p.addCurve(to: CGPoint(x: 7.649, y: 7.419), control1: CGPoint(x: 7.403, y: 7.068), control2: CGPoint(x: 7.556, y: 7.282)) p.addCurve(to: CGPoint(x: 8, y: 8), control1: CGPoint(x: 7.803, y: 7.647), control2: CGPoint(x: 7.92, y: 7.84)) p.addLine(to: CGPoint(x: 9.5, y: 11)) p.addCurve(to: CGPoint(x: 10.813, y: 13), control1: CGPoint(x: 9.75, y: 11.5), control2: CGPoint(x: 10.188, y: 12.167)) p.addCurve(to: CGPoint(x: 11.815, y: 14.257), control1: CGPoint(x: 11.167, y: 13.472), control2: CGPoint(x: 11.501, y: 13.891)) p.addCurve(to: CGPoint(x: 11.924, y: 14.55), control1: CGPoint(x: 11.885, y: 14.338), control2: CGPoint(x: 11.924, y: 14.442)) p.addCurve(to: CGPoint(x: 11.474, y: 15), control1: CGPoint(x: 11.924, y: 14.799), control2: CGPoint(x: 11.723, y: 15)) p.addLine(to: CGPoint(x: 9.809, y: 15)) p.addCurve(to: CGPoint(x: 9.546, y: 14.926), control1: CGPoint(x: 9.713, y: 15), control2: CGPoint(x: 9.626, y: 14.975)) p.addCurve(to: CGPoint(x: 9.362, y: 14.724), control1: CGPoint(x: 9.466, y: 14.876), control2: CGPoint(x: 9.405, y: 14.809)) p.addLine(to: CGPoint(x: 5.5, y: 7)) p.addCurve(to: CGPoint(x: 4.889, y: 6), control1: CGPoint(x: 5.389, y: 6.778), control2: CGPoint(x: 5.185, y: 6.444)) p.addCurve(to: CGPoint(x: 4.278, y: 5), control1: CGPoint(x: 4.593, y: 5.556), control2: CGPoint(x: 4.389, y: 5.222)) p.addCurve(to: CGPoint(x: 4, y: 4), control1: CGPoint(x: 4.093, y: 4.63), control2: CGPoint(x: 4, y: 4.296)) p.addCurve(to: CGPoint(x: 4.281, y: 2.896), control1: CGPoint(x: 4, y: 3.619), control2: CGPoint(x: 4.094, y: 3.25)) p.addCurve(to: CGPoint(x: 5.172, y: 1.879), control1: CGPoint(x: 4.484, y: 2.511), control2: CGPoint(x: 4.781, y: 2.172)) p.addCurve(to: CGPoint(x: 6.528, y: 1.211), control1: CGPoint(x: 5.562, y: 1.586), control2: CGPoint(x: 6.014, y: 1.363)) p.addCurve(to: CGPoint(x: 8, y: 1), control1: CGPoint(x: 7.001, y: 1.07), control2: CGPoint(x: 7.491, y: 1)) p.addCurve(to: CGPoint(x: 9.472, y: 1.211), control1: CGPoint(x: 8.509, y: 1), control2: CGPoint(x: 8.999, y: 1.07)) p.addCurve(to: CGPoint(x: 10.828, y: 1.879), control1: CGPoint(x: 9.986, y: 1.363), control2: CGPoint(x: 10.438, y: 1.586)) p.addCurve(to: CGPoint(x: 11.719, y: 2.896), control1: CGPoint(x: 11.219, y: 2.172), control2: CGPoint(x: 11.516, y: 2.511)) p.addCurve(to: CGPoint(x: 12, y: 4), control1: CGPoint(x: 11.906, y: 3.25), control2: CGPoint(x: 12, y: 3.619)) p.addCurve(to: CGPoint(x: 11.722, y: 5), control1: CGPoint(x: 12, y: 4.296), control2: CGPoint(x: 11.907, y: 4.63)) p.addCurve(to: CGPoint(x: 11.111, y: 6), control1: CGPoint(x: 11.611, y: 5.222), control2: CGPoint(x: 11.407, y: 5.556)) p.addCurve(to: CGPoint(x: 10.5, y: 7), control1: CGPoint(x: 10.815, y: 6.444), control2: CGPoint(x: 10.611, y: 6.778)) p.addLine(to: CGPoint(x: 9.947, y: 8.106)) p.addCurve(to: CGPoint(x: 9.763, y: 8.308), control1: CGPoint(x: 9.904, y: 8.191), control2: CGPoint(x: 9.843, y: 8.258)) p.addCurve(to: CGPoint(x: 9.5, y: 8.382), control1: CGPoint(x: 9.683, y: 8.357), control2: CGPoint(x: 9.596, y: 8.382)) p.addCurve(to: CGPoint(x: 9.237, y: 8.308), control1: CGPoint(x: 9.404, y: 8.382), control2: CGPoint(x: 9.317, y: 8.357)) p.addCurve(to: CGPoint(x: 9.053, y: 8.106), control1: CGPoint(x: 9.157, y: 8.258), control2: CGPoint(x: 9.096, y: 8.191)) p.addLine(to: CGPoint(x: 8.606, y: 7.212)) p.addCurve(to: CGPoint(x: 8.625, y: 6.776), control1: CGPoint(x: 8.537, y: 7.073), control2: CGPoint(x: 8.544, y: 6.908)) p.addCurve(to: CGPoint(x: 8.843, y: 6.459), control1: CGPoint(x: 8.689, y: 6.672), control2: CGPoint(x: 8.761, y: 6.566)) p.closeSubpath() p.move(to: CGPoint(x: 4.185, y: 14.257)) p.addCurve(to: CGPoint(x: 5.188, y: 13), control1: CGPoint(x: 4.499, y: 13.891), control2: CGPoint(x: 4.833, y: 13.472)) p.addCurve(to: CGPoint(x: 6.092, y: 11.708), control1: CGPoint(x: 5.552, y: 12.514), control2: CGPoint(x: 5.854, y: 12.083)) p.addCurve(to: CGPoint(x: 6.27, y: 11.547), control1: CGPoint(x: 6.136, y: 11.639), control2: CGPoint(x: 6.197, y: 11.584)) p.addCurve(to: CGPoint(x: 6.874, y: 11.748), control1: CGPoint(x: 6.493, y: 11.436), control2: CGPoint(x: 6.763, y: 11.526)) p.addLine(to: CGPoint(x: 7.388, y: 12.776)) p.addCurve(to: CGPoint(x: 7.388, y: 13.224), control1: CGPoint(x: 7.463, y: 12.925), control2: CGPoint(x: 7.463, y: 13.075)) p.addLine(to: CGPoint(x: 6.638, y: 14.724)) p.addCurve(to: CGPoint(x: 6.454, y: 14.926), control1: CGPoint(x: 6.595, y: 14.809), control2: CGPoint(x: 6.534, y: 14.876)) p.addCurve(to: CGPoint(x: 6.191, y: 15), control1: CGPoint(x: 6.374, y: 14.975), control2: CGPoint(x: 6.287, y: 15)) p.addLine(to: CGPoint(x: 4.526, y: 15)) p.addCurve(to: CGPoint(x: 4.233, y: 14.891), control1: CGPoint(x: 4.418, y: 15), control2: CGPoint(x: 4.314, y: 14.961)) p.addCurve(to: CGPoint(x: 4.185, y: 14.257), control1: CGPoint(x: 4.044, y: 14.729), control2: CGPoint(x: 4.023, y: 14.445)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // RibbonIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "ribbon" (line-round), MIT. https://gentleface.com/icons/ribbon 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 RibbonIcon: ImageVector by lazy { ImageVector.Builder( name = "ribbon", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M8.843 6.459C8.927 6.348 9.057 6.192 9.233 5.989C9.494 5.688 9.672 5.458 9.767 5.299C9.922 5.036 10 4.77 10 4.5C10 4.309 9.953 4.125 9.86 3.948C9.758 3.755 9.609 3.586 9.414 3.439C9.219 3.293 8.993 3.182 8.736 3.105C8.5 3.035 8.254 3 8 3C7.746 3 7.5 3.035 7.264 3.105C7.007 3.182 6.781 3.293 6.586 3.439C6.391 3.586 6.242 3.755 6.14 3.948C6.047 4.125 6 4.309 6 4.5C6 4.784 6.127 5.145 6.38 5.583C6.531 5.843 6.801 6.241 7.191 6.776C7.403 7.068 7.556 7.282 7.649 7.419C7.803 7.647 7.92 7.84 8 8L9.5 11C9.75 11.5 10.188 12.167 10.813 13C11.167 13.472 11.501 13.891 11.815 14.257C11.885 14.338 11.924 14.442 11.924 14.55C11.924 14.799 11.723 15 11.474 15L9.809 15C9.713 15 9.626 14.975 9.546 14.926C9.466 14.876 9.405 14.809 9.362 14.724L5.5 7C5.389 6.778 5.185 6.444 4.889 6C4.593 5.556 4.389 5.222 4.278 5C4.093 4.63 4 4.296 4 4C4 3.619 4.094 3.25 4.281 2.896C4.484 2.511 4.781 2.172 5.172 1.879C5.562 1.586 6.014 1.363 6.528 1.211C7.001 1.07 7.491 1 8 1C8.509 1 8.999 1.07 9.472 1.211C9.986 1.363 10.438 1.586 10.828 1.879C11.219 2.172 11.516 2.511 11.719 2.896C11.906 3.25 12 3.619 12 4C12 4.296 11.907 4.63 11.722 5C11.611 5.222 11.407 5.556 11.111 6C10.815 6.444 10.611 6.778 10.5 7L9.947 8.106C9.904 8.191 9.843 8.258 9.763 8.308C9.683 8.357 9.596 8.382 9.5 8.382C9.404 8.382 9.317 8.357 9.237 8.308C9.157 8.258 9.096 8.191 9.053 8.106L8.606 7.212C8.537 7.073 8.544 6.908 8.625 6.776C8.689 6.672 8.761 6.566 8.843 6.459ZM4.185 14.257C4.499 13.891 4.833 13.472 5.188 13C5.552 12.514 5.854 12.083 6.092 11.708C6.136 11.639 6.197 11.584 6.27 11.547C6.493 11.436 6.763 11.526 6.874 11.748L7.388 12.776C7.463 12.925 7.463 13.075 7.388 13.224L6.638 14.724C6.595 14.809 6.534 14.876 6.454 14.926C6.374 14.975 6.287 15 6.191 15L4.526 15C4.418 15 4.314 14.961 4.233 14.891C4.044 14.729 4.023 14.445 4.185 14.257Z"), fill = SolidColor(Color.Black), ).build() } // Icon(RibbonIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "ribbon" (line-round), MIT. https://gentleface.com/icons/ribbon import 'package:flutter/widgets.dart'; class RibbonIcon extends StatelessWidget { const RibbonIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _RibbonIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _RibbonIconPainter extends CustomPainter { _RibbonIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(8.843, 6.459) ..cubicTo(8.927, 6.348, 9.057, 6.192, 9.233, 5.989) ..cubicTo(9.494, 5.688, 9.672, 5.458, 9.767, 5.299) ..cubicTo(9.922, 5.036, 10, 4.77, 10, 4.5) ..cubicTo(10, 4.309, 9.953, 4.125, 9.86, 3.948) ..cubicTo(9.758, 3.755, 9.609, 3.586, 9.414, 3.439) ..cubicTo(9.219, 3.293, 8.993, 3.182, 8.736, 3.105) ..cubicTo(8.5, 3.035, 8.254, 3, 8, 3) ..cubicTo(7.746, 3, 7.5, 3.035, 7.264, 3.105) ..cubicTo(7.007, 3.182, 6.781, 3.293, 6.586, 3.439) ..cubicTo(6.391, 3.586, 6.242, 3.755, 6.14, 3.948) ..cubicTo(6.047, 4.125, 6, 4.309, 6, 4.5) ..cubicTo(6, 4.784, 6.127, 5.145, 6.38, 5.583) ..cubicTo(6.531, 5.843, 6.801, 6.241, 7.191, 6.776) ..cubicTo(7.403, 7.068, 7.556, 7.282, 7.649, 7.419) ..cubicTo(7.803, 7.647, 7.92, 7.84, 8, 8) ..lineTo(9.5, 11) ..cubicTo(9.75, 11.5, 10.188, 12.167, 10.813, 13) ..cubicTo(11.167, 13.472, 11.501, 13.891, 11.815, 14.257) ..cubicTo(11.885, 14.338, 11.924, 14.442, 11.924, 14.55) ..cubicTo(11.924, 14.799, 11.723, 15, 11.474, 15) ..lineTo(9.809, 15) ..cubicTo(9.713, 15, 9.626, 14.975, 9.546, 14.926) ..cubicTo(9.466, 14.876, 9.405, 14.809, 9.362, 14.724) ..lineTo(5.5, 7) ..cubicTo(5.389, 6.778, 5.185, 6.444, 4.889, 6) ..cubicTo(4.593, 5.556, 4.389, 5.222, 4.278, 5) ..cubicTo(4.093, 4.63, 4, 4.296, 4, 4) ..cubicTo(4, 3.619, 4.094, 3.25, 4.281, 2.896) ..cubicTo(4.484, 2.511, 4.781, 2.172, 5.172, 1.879) ..cubicTo(5.562, 1.586, 6.014, 1.363, 6.528, 1.211) ..cubicTo(7.001, 1.07, 7.491, 1, 8, 1) ..cubicTo(8.509, 1, 8.999, 1.07, 9.472, 1.211) ..cubicTo(9.986, 1.363, 10.438, 1.586, 10.828, 1.879) ..cubicTo(11.219, 2.172, 11.516, 2.511, 11.719, 2.896) ..cubicTo(11.906, 3.25, 12, 3.619, 12, 4) ..cubicTo(12, 4.296, 11.907, 4.63, 11.722, 5) ..cubicTo(11.611, 5.222, 11.407, 5.556, 11.111, 6) ..cubicTo(10.815, 6.444, 10.611, 6.778, 10.5, 7) ..lineTo(9.947, 8.106) ..cubicTo(9.904, 8.191, 9.843, 8.258, 9.763, 8.308) ..cubicTo(9.683, 8.357, 9.596, 8.382, 9.5, 8.382) ..cubicTo(9.404, 8.382, 9.317, 8.357, 9.237, 8.308) ..cubicTo(9.157, 8.258, 9.096, 8.191, 9.053, 8.106) ..lineTo(8.606, 7.212) ..cubicTo(8.537, 7.073, 8.544, 6.908, 8.625, 6.776) ..cubicTo(8.689, 6.672, 8.761, 6.566, 8.843, 6.459) ..close() ..moveTo(4.185, 14.257) ..cubicTo(4.499, 13.891, 4.833, 13.472, 5.188, 13) ..cubicTo(5.552, 12.514, 5.854, 12.083, 6.092, 11.708) ..cubicTo(6.136, 11.639, 6.197, 11.584, 6.27, 11.547) ..cubicTo(6.493, 11.436, 6.763, 11.526, 6.874, 11.748) ..lineTo(7.388, 12.776) ..cubicTo(7.463, 12.925, 7.463, 13.075, 7.388, 13.224) ..lineTo(6.638, 14.724) ..cubicTo(6.595, 14.809, 6.534, 14.876, 6.454, 14.926) ..cubicTo(6.374, 14.975, 6.287, 15, 6.191, 15) ..lineTo(4.526, 15) ..cubicTo(4.418, 15, 4.314, 14.961, 4.233, 14.891) ..cubicTo(4.044, 14.729, 4.023, 14.445, 4.185, 14.257) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_RibbonIconPainter old) => old.color != color; } ```