Gentleface › Health & medical › ribbon

ribbon icon

Ribbon: oncology, cancer care, awareness ribbon, awareness. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>

React

// Gentleface "ribbon" (line-round), MIT. https://gentleface.com/icons/ribbon
import type { SVGProps } from 'react';

export function RibbonIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path 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" />
    </svg>
  );
}

Vue

Vue: see /icons/ribbon.md

Svelte

Svelte: see /icons/ribbon.md

HTML img

HTML img: see /icons/ribbon.md

CSS

CSS: see /icons/ribbon.md

Data URL

Data URL: see /icons/ribbon.md

Sprite

Sprite: see /icons/ribbon.md

SwiftUI

SwiftUI: see /icons/ribbon.md

Compose

Compose: see /icons/ribbon.md

Android XML

Android XML: see /icons/ribbon.md

Flutter

Flutter: see /icons/ribbon.md

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. 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. More in how to use.

With npm: import { RibbonIcon } from '@gentleface/react'; (setup).

Meaning

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

Category

Health & medical

Component name

RibbonIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More health & medical icons

bandage blood-drop bone cigarette cigarette-off crutches face-mask first-aid-kit heart-pulse heart-pulse-alert hospital-bed lungs pill pill-bottle pill-check pill-clock · all health & medical icons

For agents

Metadata: /icons/ribbon.json · Markdown: /icons/ribbon.md · SVG: https://gentleface.com/svg/{style}/16/ribbon.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/ribbon.png

ribbon icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More health & medical icons

For agents

ribbon icon