# wine icon Wine. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/wine - Category: Food & drink - Use it for: wine, wine glass, red wine, wine list - Tags: wine, wine-glass, glass, red-wine, winery, sommelier, drink, beverage, alcohol, bar, food - Family: wine-off - Component name: WineIcon - Added: 2026-10-16 ## Alternatives - `grape`: a vineyard - `champagne-glasses`: cheers or champagne - `barrel`: a barrel or keg ## Also fits - barrel: wine - beer: wine - cheers: wine - grapes: wine or a wine bar - cocktail: wine ## 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/wine.svg · PNG https://gentleface.com/png/line-round/16/wine.png · https://gentleface.com/png/line-round/32/wine.png · https://gentleface.com/png/line-round/48/wine.png - line-soft: https://gentleface.com/svg/line-soft/16/wine.svg · PNG https://gentleface.com/png/line-soft/16/wine.png · https://gentleface.com/png/line-soft/32/wine.png · https://gentleface.com/png/line-soft/48/wine.png - line-sharp: https://gentleface.com/svg/line-sharp/16/wine.svg · PNG https://gentleface.com/png/line-sharp/16/wine.png · https://gentleface.com/png/line-sharp/32/wine.png · https://gentleface.com/png/line-sharp/48/wine.png - solid-round: https://gentleface.com/svg/solid-round/16/wine.svg · PNG https://gentleface.com/png/solid-round/16/wine.png · https://gentleface.com/png/solid-round/32/wine.png · https://gentleface.com/png/solid-round/48/wine.png - solid-soft: https://gentleface.com/svg/solid-soft/16/wine.svg · PNG https://gentleface.com/png/solid-soft/16/wine.png · https://gentleface.com/png/solid-soft/32/wine.png · https://gentleface.com/png/solid-soft/48/wine.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/wine.svg · PNG https://gentleface.com/png/solid-sharp/16/wine.png · https://gentleface.com/png/solid-sharp/32/wine.png · https://gentleface.com/png/solid-sharp/48/wine.png The SVG of every style: https://gentleface.com/icons/wine.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 "wine" (line-round), MIT. https://gentleface.com/icons/wine import type { SVGProps } from 'react'; export function WineIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "wine" (line-round), MIT. https://gentleface.com/icons/wine. Takes the text color. */ .icon-wine { 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='M11.985 5.379C11.995 5.419 12 5.459 12 5.5C12 6.072 11.895 6.624 11.684 7.156C11.455 7.734 11.121 8.243 10.682 8.682C10.243 9.121 9.734 9.455 9.156 9.684C8.781 9.833 8.395 9.929 8 9.973L8 14L10.5 14C10.641 14 10.759 14.048 10.856 14.144C10.952 14.241 11 14.359 11 14.5C11 14.641 10.952 14.759 10.856 14.856C10.759 14.952 10.641 15 10.5 15L4.5 15C4.359 15 4.241 14.952 4.144 14.856C4.048 14.759 4 14.641 4 14.5C4 14.359 4.048 14.241 4.144 14.144C4.241 14.048 4.359 14 4.5 14L7 14L7 9.973C6.605 9.929 6.219 9.833 5.844 9.684C5.266 9.455 4.757 9.121 4.318 8.682C3.879 8.243 3.545 7.734 3.316 7.156C3.105 6.624 3 6.072 3 5.5C3 5.459 3.005 5.419 3.015 5.379L3.92 1.757C3.976 1.535 4.094 1.353 4.275 1.212C4.456 1.071 4.661 1 4.89 1L10.11 1C10.339 1 10.544 1.071 10.725 1.212C10.906 1.353 11.024 1.535 11.08 1.757L11.985 5.379ZM10.86 5L10.11 2L4.89 2L4.14 5L10.86 5ZM4.246 6.788C4.424 7.238 4.683 7.633 5.025 7.975C5.367 8.317 5.762 8.576 6.212 8.754C6.625 8.918 7.055 9 7.5 9C7.945 9 8.375 8.918 8.788 8.754C9.238 8.576 9.633 8.317 9.975 7.975C10.317 7.633 10.576 7.238 10.754 6.788C10.856 6.532 10.926 6.269 10.965 6L4.035 6C4.074 6.269 4.144 6.532 4.246 6.788Z'/%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='M11.985 5.379C11.995 5.419 12 5.459 12 5.5C12 6.072 11.895 6.624 11.684 7.156C11.455 7.734 11.121 8.243 10.682 8.682C10.243 9.121 9.734 9.455 9.156 9.684C8.781 9.833 8.395 9.929 8 9.973L8 14L10.5 14C10.641 14 10.759 14.048 10.856 14.144C10.952 14.241 11 14.359 11 14.5C11 14.641 10.952 14.759 10.856 14.856C10.759 14.952 10.641 15 10.5 15L4.5 15C4.359 15 4.241 14.952 4.144 14.856C4.048 14.759 4 14.641 4 14.5C4 14.359 4.048 14.241 4.144 14.144C4.241 14.048 4.359 14 4.5 14L7 14L7 9.973C6.605 9.929 6.219 9.833 5.844 9.684C5.266 9.455 4.757 9.121 4.318 8.682C3.879 8.243 3.545 7.734 3.316 7.156C3.105 6.624 3 6.072 3 5.5C3 5.459 3.005 5.419 3.015 5.379L3.92 1.757C3.976 1.535 4.094 1.353 4.275 1.212C4.456 1.071 4.661 1 4.89 1L10.11 1C10.339 1 10.544 1.071 10.725 1.212C10.906 1.353 11.024 1.535 11.08 1.757L11.985 5.379ZM10.86 5L10.11 2L4.89 2L4.14 5L10.86 5ZM4.246 6.788C4.424 7.238 4.683 7.633 5.025 7.975C5.367 8.317 5.762 8.576 6.212 8.754C6.625 8.918 7.055 9 7.5 9C7.945 9 8.375 8.918 8.788 8.754C9.238 8.576 9.633 8.317 9.975 7.975C10.317 7.633 10.576 7.238 10.754 6.788C10.856 6.532 10.926 6.269 10.965 6L4.035 6C4.074 6.269 4.144 6.532 4.246 6.788Z'/%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='M11.985 5.379C11.995 5.419 12 5.459 12 5.5C12 6.072 11.895 6.624 11.684 7.156C11.455 7.734 11.121 8.243 10.682 8.682C10.243 9.121 9.734 9.455 9.156 9.684C8.781 9.833 8.395 9.929 8 9.973L8 14L10.5 14C10.641 14 10.759 14.048 10.856 14.144C10.952 14.241 11 14.359 11 14.5C11 14.641 10.952 14.759 10.856 14.856C10.759 14.952 10.641 15 10.5 15L4.5 15C4.359 15 4.241 14.952 4.144 14.856C4.048 14.759 4 14.641 4 14.5C4 14.359 4.048 14.241 4.144 14.144C4.241 14.048 4.359 14 4.5 14L7 14L7 9.973C6.605 9.929 6.219 9.833 5.844 9.684C5.266 9.455 4.757 9.121 4.318 8.682C3.879 8.243 3.545 7.734 3.316 7.156C3.105 6.624 3 6.072 3 5.5C3 5.459 3.005 5.419 3.015 5.379L3.92 1.757C3.976 1.535 4.094 1.353 4.275 1.212C4.456 1.071 4.661 1 4.89 1L10.11 1C10.339 1 10.544 1.071 10.725 1.212C10.906 1.353 11.024 1.535 11.08 1.757L11.985 5.379ZM10.86 5L10.11 2L4.89 2L4.14 5L10.86 5ZM4.246 6.788C4.424 7.238 4.683 7.633 5.025 7.975C5.367 8.317 5.762 8.576 6.212 8.754C6.625 8.918 7.055 9 7.5 9C7.945 9 8.375 8.918 8.788 8.754C9.238 8.576 9.633 8.317 9.975 7.975C10.317 7.633 10.576 7.238 10.754 6.788C10.856 6.532 10.926 6.269 10.965 6L4.035 6C4.074 6.269 4.144 6.532 4.246 6.788Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "wine" (line-round), MIT. https://gentleface.com/icons/wine import SwiftUI struct WineIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 11.985, y: 5.379)) p.addCurve(to: CGPoint(x: 12, y: 5.5), control1: CGPoint(x: 11.995, y: 5.419), control2: CGPoint(x: 12, y: 5.459)) p.addCurve(to: CGPoint(x: 11.684, y: 7.156), control1: CGPoint(x: 12, y: 6.072), control2: CGPoint(x: 11.895, y: 6.624)) p.addCurve(to: CGPoint(x: 10.682, y: 8.682), control1: CGPoint(x: 11.455, y: 7.734), control2: CGPoint(x: 11.121, y: 8.243)) p.addCurve(to: CGPoint(x: 9.156, y: 9.684), control1: CGPoint(x: 10.243, y: 9.121), control2: CGPoint(x: 9.734, y: 9.455)) p.addCurve(to: CGPoint(x: 8, y: 9.973), control1: CGPoint(x: 8.781, y: 9.833), control2: CGPoint(x: 8.395, y: 9.929)) p.addLine(to: CGPoint(x: 8, y: 14)) p.addLine(to: CGPoint(x: 10.5, y: 14)) p.addCurve(to: CGPoint(x: 10.856, y: 14.144), control1: CGPoint(x: 10.641, y: 14), control2: CGPoint(x: 10.759, y: 14.048)) p.addCurve(to: CGPoint(x: 11, y: 14.5), control1: CGPoint(x: 10.952, y: 14.241), control2: CGPoint(x: 11, y: 14.359)) p.addCurve(to: CGPoint(x: 10.856, y: 14.856), control1: CGPoint(x: 11, y: 14.641), control2: CGPoint(x: 10.952, y: 14.759)) p.addCurve(to: CGPoint(x: 10.5, y: 15), control1: CGPoint(x: 10.759, y: 14.952), control2: CGPoint(x: 10.641, y: 15)) p.addLine(to: CGPoint(x: 4.5, y: 15)) p.addCurve(to: CGPoint(x: 4.144, y: 14.856), control1: CGPoint(x: 4.359, y: 15), control2: CGPoint(x: 4.241, y: 14.952)) p.addCurve(to: CGPoint(x: 4, y: 14.5), control1: CGPoint(x: 4.048, y: 14.759), control2: CGPoint(x: 4, y: 14.641)) p.addCurve(to: CGPoint(x: 4.144, y: 14.144), control1: CGPoint(x: 4, y: 14.359), control2: CGPoint(x: 4.048, y: 14.241)) p.addCurve(to: CGPoint(x: 4.5, y: 14), control1: CGPoint(x: 4.241, y: 14.048), control2: CGPoint(x: 4.359, y: 14)) p.addLine(to: CGPoint(x: 7, y: 14)) p.addLine(to: CGPoint(x: 7, y: 9.973)) p.addCurve(to: CGPoint(x: 5.844, y: 9.684), control1: CGPoint(x: 6.605, y: 9.929), control2: CGPoint(x: 6.219, y: 9.833)) p.addCurve(to: CGPoint(x: 4.318, y: 8.682), control1: CGPoint(x: 5.266, y: 9.455), control2: CGPoint(x: 4.757, y: 9.121)) p.addCurve(to: CGPoint(x: 3.316, y: 7.156), control1: CGPoint(x: 3.879, y: 8.243), control2: CGPoint(x: 3.545, y: 7.734)) p.addCurve(to: CGPoint(x: 3, y: 5.5), control1: CGPoint(x: 3.105, y: 6.624), control2: CGPoint(x: 3, y: 6.072)) p.addCurve(to: CGPoint(x: 3.015, y: 5.379), control1: CGPoint(x: 3, y: 5.459), control2: CGPoint(x: 3.005, y: 5.419)) p.addLine(to: CGPoint(x: 3.92, y: 1.757)) p.addCurve(to: CGPoint(x: 4.275, y: 1.212), control1: CGPoint(x: 3.976, y: 1.535), control2: CGPoint(x: 4.094, y: 1.353)) p.addCurve(to: CGPoint(x: 4.89, y: 1), control1: CGPoint(x: 4.456, y: 1.071), control2: CGPoint(x: 4.661, y: 1)) p.addLine(to: CGPoint(x: 10.11, y: 1)) p.addCurve(to: CGPoint(x: 10.725, y: 1.212), control1: CGPoint(x: 10.339, y: 1), control2: CGPoint(x: 10.544, y: 1.071)) p.addCurve(to: CGPoint(x: 11.08, y: 1.757), control1: CGPoint(x: 10.906, y: 1.353), control2: CGPoint(x: 11.024, y: 1.535)) p.addLine(to: CGPoint(x: 11.985, y: 5.379)) p.closeSubpath() p.move(to: CGPoint(x: 10.86, y: 5)) p.addLine(to: CGPoint(x: 10.11, y: 2)) p.addLine(to: CGPoint(x: 4.89, y: 2)) p.addLine(to: CGPoint(x: 4.14, y: 5)) p.addLine(to: CGPoint(x: 10.86, y: 5)) p.closeSubpath() p.move(to: CGPoint(x: 4.246, y: 6.788)) p.addCurve(to: CGPoint(x: 5.025, y: 7.975), control1: CGPoint(x: 4.424, y: 7.238), control2: CGPoint(x: 4.683, y: 7.633)) p.addCurve(to: CGPoint(x: 6.212, y: 8.754), control1: CGPoint(x: 5.367, y: 8.317), control2: CGPoint(x: 5.762, y: 8.576)) p.addCurve(to: CGPoint(x: 7.5, y: 9), control1: CGPoint(x: 6.625, y: 8.918), control2: CGPoint(x: 7.055, y: 9)) p.addCurve(to: CGPoint(x: 8.788, y: 8.754), control1: CGPoint(x: 7.945, y: 9), control2: CGPoint(x: 8.375, y: 8.918)) p.addCurve(to: CGPoint(x: 9.975, y: 7.975), control1: CGPoint(x: 9.238, y: 8.576), control2: CGPoint(x: 9.633, y: 8.317)) p.addCurve(to: CGPoint(x: 10.754, y: 6.788), control1: CGPoint(x: 10.317, y: 7.633), control2: CGPoint(x: 10.576, y: 7.238)) p.addCurve(to: CGPoint(x: 10.965, y: 6), control1: CGPoint(x: 10.856, y: 6.532), control2: CGPoint(x: 10.926, y: 6.269)) p.addLine(to: CGPoint(x: 4.035, y: 6)) p.addCurve(to: CGPoint(x: 4.246, y: 6.788), control1: CGPoint(x: 4.074, y: 6.269), control2: CGPoint(x: 4.144, y: 6.532)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // WineIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "wine" (line-round), MIT. https://gentleface.com/icons/wine 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 WineIcon: ImageVector by lazy { ImageVector.Builder( name = "wine", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M11.985 5.379C11.995 5.419 12 5.459 12 5.5C12 6.072 11.895 6.624 11.684 7.156C11.455 7.734 11.121 8.243 10.682 8.682C10.243 9.121 9.734 9.455 9.156 9.684C8.781 9.833 8.395 9.929 8 9.973L8 14L10.5 14C10.641 14 10.759 14.048 10.856 14.144C10.952 14.241 11 14.359 11 14.5C11 14.641 10.952 14.759 10.856 14.856C10.759 14.952 10.641 15 10.5 15L4.5 15C4.359 15 4.241 14.952 4.144 14.856C4.048 14.759 4 14.641 4 14.5C4 14.359 4.048 14.241 4.144 14.144C4.241 14.048 4.359 14 4.5 14L7 14L7 9.973C6.605 9.929 6.219 9.833 5.844 9.684C5.266 9.455 4.757 9.121 4.318 8.682C3.879 8.243 3.545 7.734 3.316 7.156C3.105 6.624 3 6.072 3 5.5C3 5.459 3.005 5.419 3.015 5.379L3.92 1.757C3.976 1.535 4.094 1.353 4.275 1.212C4.456 1.071 4.661 1 4.89 1L10.11 1C10.339 1 10.544 1.071 10.725 1.212C10.906 1.353 11.024 1.535 11.08 1.757L11.985 5.379ZM10.86 5L10.11 2L4.89 2L4.14 5L10.86 5ZM4.246 6.788C4.424 7.238 4.683 7.633 5.025 7.975C5.367 8.317 5.762 8.576 6.212 8.754C6.625 8.918 7.055 9 7.5 9C7.945 9 8.375 8.918 8.788 8.754C9.238 8.576 9.633 8.317 9.975 7.975C10.317 7.633 10.576 7.238 10.754 6.788C10.856 6.532 10.926 6.269 10.965 6L4.035 6C4.074 6.269 4.144 6.532 4.246 6.788Z"), fill = SolidColor(Color.Black), ).build() } // Icon(WineIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "wine" (line-round), MIT. https://gentleface.com/icons/wine import 'package:flutter/widgets.dart'; class WineIcon extends StatelessWidget { const WineIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _WineIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _WineIconPainter extends CustomPainter { _WineIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(11.985, 5.379) ..cubicTo(11.995, 5.419, 12, 5.459, 12, 5.5) ..cubicTo(12, 6.072, 11.895, 6.624, 11.684, 7.156) ..cubicTo(11.455, 7.734, 11.121, 8.243, 10.682, 8.682) ..cubicTo(10.243, 9.121, 9.734, 9.455, 9.156, 9.684) ..cubicTo(8.781, 9.833, 8.395, 9.929, 8, 9.973) ..lineTo(8, 14) ..lineTo(10.5, 14) ..cubicTo(10.641, 14, 10.759, 14.048, 10.856, 14.144) ..cubicTo(10.952, 14.241, 11, 14.359, 11, 14.5) ..cubicTo(11, 14.641, 10.952, 14.759, 10.856, 14.856) ..cubicTo(10.759, 14.952, 10.641, 15, 10.5, 15) ..lineTo(4.5, 15) ..cubicTo(4.359, 15, 4.241, 14.952, 4.144, 14.856) ..cubicTo(4.048, 14.759, 4, 14.641, 4, 14.5) ..cubicTo(4, 14.359, 4.048, 14.241, 4.144, 14.144) ..cubicTo(4.241, 14.048, 4.359, 14, 4.5, 14) ..lineTo(7, 14) ..lineTo(7, 9.973) ..cubicTo(6.605, 9.929, 6.219, 9.833, 5.844, 9.684) ..cubicTo(5.266, 9.455, 4.757, 9.121, 4.318, 8.682) ..cubicTo(3.879, 8.243, 3.545, 7.734, 3.316, 7.156) ..cubicTo(3.105, 6.624, 3, 6.072, 3, 5.5) ..cubicTo(3, 5.459, 3.005, 5.419, 3.015, 5.379) ..lineTo(3.92, 1.757) ..cubicTo(3.976, 1.535, 4.094, 1.353, 4.275, 1.212) ..cubicTo(4.456, 1.071, 4.661, 1, 4.89, 1) ..lineTo(10.11, 1) ..cubicTo(10.339, 1, 10.544, 1.071, 10.725, 1.212) ..cubicTo(10.906, 1.353, 11.024, 1.535, 11.08, 1.757) ..lineTo(11.985, 5.379) ..close() ..moveTo(10.86, 5) ..lineTo(10.11, 2) ..lineTo(4.89, 2) ..lineTo(4.14, 5) ..lineTo(10.86, 5) ..close() ..moveTo(4.246, 6.788) ..cubicTo(4.424, 7.238, 4.683, 7.633, 5.025, 7.975) ..cubicTo(5.367, 8.317, 5.762, 8.576, 6.212, 8.754) ..cubicTo(6.625, 8.918, 7.055, 9, 7.5, 9) ..cubicTo(7.945, 9, 8.375, 8.918, 8.788, 8.754) ..cubicTo(9.238, 8.576, 9.633, 8.317, 9.975, 7.975) ..cubicTo(10.317, 7.633, 10.576, 7.238, 10.754, 6.788) ..cubicTo(10.856, 6.532, 10.926, 6.269, 10.965, 6) ..lineTo(4.035, 6) ..cubicTo(4.074, 6.269, 4.144, 6.532, 4.246, 6.788) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_WineIconPainter old) => old.color != color; } ```