# candy-cane icon Candy cane. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/candy-cane - Category: Food & drink - Use it for: candy cane, christmas candy - Tags: candy-cane, christmas, xmas, holiday, holidays, peppermint, sweet, candy, winter, festive, stripes, food - Component name: CandyCaneIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { CandyCaneIcon } 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/candy-cane.svg · PNG https://gentleface.com/png/line-round/16/candy-cane.png · https://gentleface.com/png/line-round/32/candy-cane.png · https://gentleface.com/png/line-round/48/candy-cane.png - line-soft: https://gentleface.com/svg/line-soft/16/candy-cane.svg · PNG https://gentleface.com/png/line-soft/16/candy-cane.png · https://gentleface.com/png/line-soft/32/candy-cane.png · https://gentleface.com/png/line-soft/48/candy-cane.png - line-sharp: https://gentleface.com/svg/line-sharp/16/candy-cane.svg · PNG https://gentleface.com/png/line-sharp/16/candy-cane.png · https://gentleface.com/png/line-sharp/32/candy-cane.png · https://gentleface.com/png/line-sharp/48/candy-cane.png - solid-round: https://gentleface.com/svg/solid-round/16/candy-cane.svg · PNG https://gentleface.com/png/solid-round/16/candy-cane.png · https://gentleface.com/png/solid-round/32/candy-cane.png · https://gentleface.com/png/solid-round/48/candy-cane.png - solid-soft: https://gentleface.com/svg/solid-soft/16/candy-cane.svg · PNG https://gentleface.com/png/solid-soft/16/candy-cane.png · https://gentleface.com/png/solid-soft/32/candy-cane.png · https://gentleface.com/png/solid-soft/48/candy-cane.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/candy-cane.svg · PNG https://gentleface.com/png/solid-sharp/16/candy-cane.png · https://gentleface.com/png/solid-sharp/32/candy-cane.png · https://gentleface.com/png/solid-sharp/48/candy-cane.png The SVG of every style: https://gentleface.com/icons/candy-cane.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 "candy-cane" (line-round), MIT. https://gentleface.com/icons/candy-cane import type { SVGProps } from 'react'; export function CandyCaneIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "candy-cane" (line-round), MIT. https://gentleface.com/icons/candy-cane. Takes the text color. */ .icon-candy-cane { 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='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'/%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='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'/%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='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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "candy-cane" (line-round), MIT. https://gentleface.com/icons/candy-cane import SwiftUI struct CandyCaneIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.561, y: 8.561)) p.addCurve(to: CGPoint(x: 13.5, y: 9), control1: CGPoint(x: 14.268, y: 8.854), control2: CGPoint(x: 13.914, y: 9)) p.addCurve(to: CGPoint(x: 12.439, y: 8.561), control1: CGPoint(x: 13.086, y: 9), control2: CGPoint(x: 12.732, y: 8.854)) p.addCurve(to: CGPoint(x: 12, y: 7.5), control1: CGPoint(x: 12.146, y: 8.268), control2: CGPoint(x: 12, y: 7.914)) p.addLine(to: CGPoint(x: 12, y: 5.5)) p.addCurve(to: CGPoint(x: 11.678, y: 4.571), control1: CGPoint(x: 12, y: 5.153), control2: CGPoint(x: 11.893, y: 4.843)) p.addCurve(to: CGPoint(x: 10.849, y: 4.041), control1: CGPoint(x: 11.463, y: 4.298), control2: CGPoint(x: 11.186, y: 4.122)) p.addCurve(to: CGPoint(x: 9.87, y: 4.139), control1: CGPoint(x: 10.511, y: 3.96), control2: CGPoint(x: 10.185, y: 3.993)) p.addCurve(to: CGPoint(x: 9.162, y: 4.822), control1: CGPoint(x: 9.555, y: 4.284), control2: CGPoint(x: 9.319, y: 4.512)) p.addLine(to: CGPoint(x: 9.072, y: 5)) p.addLine(to: CGPoint(x: 5.683, y: 5)) p.addLine(to: CGPoint(x: 6.512, y: 3.415)) p.addCurve(to: CGPoint(x: 7.38, y: 2.257), control1: CGPoint(x: 6.739, y: 2.982), control2: CGPoint(x: 7.028, y: 2.596)) p.addCurve(to: CGPoint(x: 8.649, y: 1.399), control1: CGPoint(x: 7.754, y: 1.898), control2: CGPoint(x: 8.176, y: 1.612)) p.addCurve(to: CGPoint(x: 10.131, y: 1.015), control1: CGPoint(x: 9.121, y: 1.185), control2: CGPoint(x: 9.615, y: 1.058)) p.addCurve(to: CGPoint(x: 11.574, y: 1.13), control1: CGPoint(x: 10.618, y: 0.975), control2: CGPoint(x: 11.099, y: 1.013)) p.addCurve(to: CGPoint(x: 12.905, y: 1.697), control1: CGPoint(x: 12.048, y: 1.247), control2: CGPoint(x: 12.492, y: 1.436)) p.addCurve(to: CGPoint(x: 14.041, y: 2.723), control1: CGPoint(x: 13.343, y: 1.974), control2: CGPoint(x: 13.722, y: 2.316)) p.addCurve(to: CGPoint(x: 14.767, y: 4.072), control1: CGPoint(x: 14.361, y: 3.131), control2: CGPoint(x: 14.603, y: 3.58)) p.addCurve(to: CGPoint(x: 15, y: 5.5), control1: CGPoint(x: 14.922, y: 4.535), control2: CGPoint(x: 15, y: 5.011)) p.addLine(to: CGPoint(x: 15, y: 7.5)) p.addCurve(to: CGPoint(x: 14.561, y: 8.561), control1: CGPoint(x: 15, y: 7.914), control2: CGPoint(x: 14.854, y: 8.268)) p.closeSubpath() p.move(to: CGPoint(x: 8.565, y: 6)) p.addLine(to: CGPoint(x: 7.55, y: 8)) p.addLine(to: CGPoint(x: 4.115, y: 8)) p.addLine(to: CGPoint(x: 5.16, y: 6)) p.addLine(to: CGPoint(x: 8.565, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 6.029, y: 11)) p.addLine(to: CGPoint(x: 2.546, y: 11)) p.addLine(to: CGPoint(x: 3.592, y: 9)) p.addLine(to: CGPoint(x: 7.043, y: 9)) p.addLine(to: CGPoint(x: 6.029, y: 11)) p.closeSubpath() p.move(to: CGPoint(x: 5.522, y: 12)) p.addLine(to: CGPoint(x: 4.724, y: 13.572)) p.addCurve(to: CGPoint(x: 4.359, y: 14.014), control1: CGPoint(x: 4.635, y: 13.747), control2: CGPoint(x: 4.514, y: 13.894)) p.addCurve(to: CGPoint(x: 3.839, y: 14.256), control1: CGPoint(x: 4.203, y: 14.134), control2: CGPoint(x: 4.03, y: 14.214)) p.addCurve(to: CGPoint(x: 3.266, y: 14.251), control1: CGPoint(x: 3.647, y: 14.297), control2: CGPoint(x: 3.456, y: 14.296)) p.addCurve(to: CGPoint(x: 2.75, y: 14), control1: CGPoint(x: 3.075, y: 14.206), control2: CGPoint(x: 2.903, y: 14.122)) p.addCurve(to: CGPoint(x: 2.062, y: 12.882), control1: CGPoint(x: 2.387, y: 13.71), control2: CGPoint(x: 2.158, y: 13.337)) p.addCurve(to: CGPoint(x: 2.078, y: 12), control1: CGPoint(x: 1.998, y: 12.578), control2: CGPoint(x: 2.004, y: 12.284)) p.addLine(to: CGPoint(x: 5.522, y: 12)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // CandyCaneIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "candy-cane" (line-round), MIT. https://gentleface.com/icons/candy-cane 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 CandyCaneIcon: ImageVector by lazy { ImageVector.Builder( name = "candy-cane", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(CandyCaneIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "candy-cane" (line-round), MIT. https://gentleface.com/icons/candy-cane import 'package:flutter/widgets.dart'; class CandyCaneIcon extends StatelessWidget { const CandyCaneIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _CandyCaneIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _CandyCaneIconPainter extends CustomPainter { _CandyCaneIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(14.561, 8.561) ..cubicTo(14.268, 8.854, 13.914, 9, 13.5, 9) ..cubicTo(13.086, 9, 12.732, 8.854, 12.439, 8.561) ..cubicTo(12.146, 8.268, 12, 7.914, 12, 7.5) ..lineTo(12, 5.5) ..cubicTo(12, 5.153, 11.893, 4.843, 11.678, 4.571) ..cubicTo(11.463, 4.298, 11.186, 4.122, 10.849, 4.041) ..cubicTo(10.511, 3.96, 10.185, 3.993, 9.87, 4.139) ..cubicTo(9.555, 4.284, 9.319, 4.512, 9.162, 4.822) ..lineTo(9.072, 5) ..lineTo(5.683, 5) ..lineTo(6.512, 3.415) ..cubicTo(6.739, 2.982, 7.028, 2.596, 7.38, 2.257) ..cubicTo(7.754, 1.898, 8.176, 1.612, 8.649, 1.399) ..cubicTo(9.121, 1.185, 9.615, 1.058, 10.131, 1.015) ..cubicTo(10.618, 0.975, 11.099, 1.013, 11.574, 1.13) ..cubicTo(12.048, 1.247, 12.492, 1.436, 12.905, 1.697) ..cubicTo(13.343, 1.974, 13.722, 2.316, 14.041, 2.723) ..cubicTo(14.361, 3.131, 14.603, 3.58, 14.767, 4.072) ..cubicTo(14.922, 4.535, 15, 5.011, 15, 5.5) ..lineTo(15, 7.5) ..cubicTo(15, 7.914, 14.854, 8.268, 14.561, 8.561) ..close() ..moveTo(8.565, 6) ..lineTo(7.55, 8) ..lineTo(4.115, 8) ..lineTo(5.16, 6) ..lineTo(8.565, 6) ..close() ..moveTo(6.029, 11) ..lineTo(2.546, 11) ..lineTo(3.592, 9) ..lineTo(7.043, 9) ..lineTo(6.029, 11) ..close() ..moveTo(5.522, 12) ..lineTo(4.724, 13.572) ..cubicTo(4.635, 13.747, 4.514, 13.894, 4.359, 14.014) ..cubicTo(4.203, 14.134, 4.03, 14.214, 3.839, 14.256) ..cubicTo(3.647, 14.297, 3.456, 14.296, 3.266, 14.251) ..cubicTo(3.075, 14.206, 2.903, 14.122, 2.75, 14) ..cubicTo(2.387, 13.71, 2.158, 13.337, 2.062, 12.882) ..cubicTo(1.998, 12.578, 2.004, 12.284, 2.078, 12) ..lineTo(5.522, 12) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_CandyCaneIconPainter old) => old.color != color; } ```