gentleface

Gentleface › Food & drink › candy-cane

candy-cane icon

Candy cane: candy cane, christmas candy. 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="M14.561 8.561C14.268 8.854 13.914 9 13.5 9C13.086 9 12.732 8.854 12.439 8.561C12.146 8.268 12 7.914 12 7.5L12 5.5C12 5.153 11.893 4.843 11.678 4.571C11.463 4.298 11.186 4.122 10.849 4.041C10.511 3.96 10.185 3.993 9.87 4.139C9.555 4.284 9.319 4.512 9.162 4.822L9.072 5L5.683 5L6.512 3.415C6.739 2.982 7.028 2.596 7.38 2.257C7.754 1.898 8.176 1.612 8.649 1.399C9.121 1.185 9.615 1.058 10.131 1.015C10.618 0.975 11.099 1.013 11.574 1.13C12.048 1.247 12.492 1.436 12.905 1.697C13.343 1.974 13.722 2.316 14.041 2.723C14.361 3.131 14.603 3.58 14.767 4.072C14.922 4.535 15 5.011 15 5.5L15 7.5C15 7.914 14.854 8.268 14.561 8.561ZM8.565 6L7.55 8L4.115 8L5.16 6L8.565 6ZM6.029 11L2.546 11L3.592 9L7.043 9L6.029 11ZM5.522 12L4.724 13.572C4.635 13.747 4.514 13.894 4.359 14.014C4.203 14.134 4.03 14.214 3.839 14.256C3.647 14.297 3.456 14.296 3.266 14.251C3.075 14.206 2.903 14.122 2.75 14C2.387 13.71 2.158 13.337 2.062 12.882C1.998 12.578 2.004 12.284 2.078 12L5.522 12Z"/></svg>
React
// Gentleface "candy-cane" (line-round), MIT. https://gentleface.com/icons/candy-cane
import type { SVGProps } from 'react';

export function CandyCaneIcon(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="M14.561 8.561C14.268 8.854 13.914 9 13.5 9C13.086 9 12.732 8.854 12.439 8.561C12.146 8.268 12 7.914 12 7.5L12 5.5C12 5.153 11.893 4.843 11.678 4.571C11.463 4.298 11.186 4.122 10.849 4.041C10.511 3.96 10.185 3.993 9.87 4.139C9.555 4.284 9.319 4.512 9.162 4.822L9.072 5L5.683 5L6.512 3.415C6.739 2.982 7.028 2.596 7.38 2.257C7.754 1.898 8.176 1.612 8.649 1.399C9.121 1.185 9.615 1.058 10.131 1.015C10.618 0.975 11.099 1.013 11.574 1.13C12.048 1.247 12.492 1.436 12.905 1.697C13.343 1.974 13.722 2.316 14.041 2.723C14.361 3.131 14.603 3.58 14.767 4.072C14.922 4.535 15 5.011 15 5.5L15 7.5C15 7.914 14.854 8.268 14.561 8.561ZM8.565 6L7.55 8L4.115 8L5.16 6L8.565 6ZM6.029 11L2.546 11L3.592 9L7.043 9L6.029 11ZM5.522 12L4.724 13.572C4.635 13.747 4.514 13.894 4.359 14.014C4.203 14.134 4.03 14.214 3.839 14.256C3.647 14.297 3.456 14.296 3.266 14.251C3.075 14.206 2.903 14.122 2.75 14C2.387 13.71 2.158 13.337 2.062 12.882C1.998 12.578 2.004 12.284 2.078 12L5.522 12Z" />
    </svg>
  );
}
Vue
Vue: see /icons/candy-cane.md
Svelte
Svelte: see /icons/candy-cane.md
HTML img
HTML img: see /icons/candy-cane.md
CSS
CSS: see /icons/candy-cane.md
Data URL
Data URL: see /icons/candy-cane.md
Sprite
Sprite: see /icons/candy-cane.md
SwiftUI
SwiftUI: see /icons/candy-cane.md
Compose
Compose: see /icons/candy-cane.md
Android XML
Android XML: see /icons/candy-cane.md
Flutter
Flutter: see /icons/candy-cane.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 { CandyCaneIcon } from '@gentleface/react'; (setup).

Meaning

Use it for
candy cane, christmas candy
Tags
candy-cane, christmas, xmas, holiday, holidays, peppermint, sweet, candy, winter, festive, stripes, food
Category
Food & drink
Component name
CandyCaneIcon
History
  • released in 0.2.0
  • added
Since
version 0.2.0

More food & drink icons

For agents

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