# test-tube icon Test tube. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/test-tube - Category: Science & education - Use it for: test tube, lab test, lab sample, lab results, blood test, vial - Tags: test-tube, lab, laboratory, sample, test, chemistry, blood-test, vial - Component name: TestTubeIcon - Added: 2026-10-15 ## Alternatives - `flask`: an experiment or a lab - `beaker`: a chemical ## Also fits - beaker: a lab test or a sample - lab: a lab test or a sample ## 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/test-tube.svg · PNG https://gentleface.com/png/line-round/16/test-tube.png · https://gentleface.com/png/line-round/32/test-tube.png · https://gentleface.com/png/line-round/48/test-tube.png - line-soft: https://gentleface.com/svg/line-soft/16/test-tube.svg · PNG https://gentleface.com/png/line-soft/16/test-tube.png · https://gentleface.com/png/line-soft/32/test-tube.png · https://gentleface.com/png/line-soft/48/test-tube.png - line-sharp: https://gentleface.com/svg/line-sharp/16/test-tube.svg · PNG https://gentleface.com/png/line-sharp/16/test-tube.png · https://gentleface.com/png/line-sharp/32/test-tube.png · https://gentleface.com/png/line-sharp/48/test-tube.png - solid-round: https://gentleface.com/svg/solid-round/16/test-tube.svg · PNG https://gentleface.com/png/solid-round/16/test-tube.png · https://gentleface.com/png/solid-round/32/test-tube.png · https://gentleface.com/png/solid-round/48/test-tube.png - solid-soft: https://gentleface.com/svg/solid-soft/16/test-tube.svg · PNG https://gentleface.com/png/solid-soft/16/test-tube.png · https://gentleface.com/png/solid-soft/32/test-tube.png · https://gentleface.com/png/solid-soft/48/test-tube.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/test-tube.svg · PNG https://gentleface.com/png/solid-sharp/16/test-tube.png · https://gentleface.com/png/solid-sharp/32/test-tube.png · https://gentleface.com/png/solid-sharp/48/test-tube.png The SVG of every style: https://gentleface.com/icons/test-tube.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 "test-tube" (line-round), MIT. https://gentleface.com/icons/test-tube import type { SVGProps } from 'react'; export function TestTubeIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "test-tube" (line-round), MIT. https://gentleface.com/icons/test-tube. Takes the text color. */ .icon-test-tube { 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='M10 13C10 13.254 9.953 13.5 9.86 13.736C9.758 13.993 9.609 14.219 9.414 14.414C9.219 14.609 8.993 14.758 8.736 14.86C8.5 14.953 8.254 15 8 15C7.746 15 7.5 14.953 7.264 14.86C7.007 14.758 6.781 14.609 6.586 14.414C6.391 14.219 6.242 13.993 6.14 13.736C6.047 13.5 6 13.254 6 13L6 3L5.5 3C5.359 3 5.241 2.952 5.144 2.856C5.048 2.759 5 2.641 5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2L10.5 2C10.641 2 10.759 2.048 10.856 2.144C10.952 2.241 11 2.359 11 2.5C11 2.641 10.952 2.759 10.856 2.856C10.759 2.952 10.641 3 10.5 3L10 3L10 13ZM7 9L9 9L9 3L7 3L7 9Z'/%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='M10 13C10 13.254 9.953 13.5 9.86 13.736C9.758 13.993 9.609 14.219 9.414 14.414C9.219 14.609 8.993 14.758 8.736 14.86C8.5 14.953 8.254 15 8 15C7.746 15 7.5 14.953 7.264 14.86C7.007 14.758 6.781 14.609 6.586 14.414C6.391 14.219 6.242 13.993 6.14 13.736C6.047 13.5 6 13.254 6 13L6 3L5.5 3C5.359 3 5.241 2.952 5.144 2.856C5.048 2.759 5 2.641 5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2L10.5 2C10.641 2 10.759 2.048 10.856 2.144C10.952 2.241 11 2.359 11 2.5C11 2.641 10.952 2.759 10.856 2.856C10.759 2.952 10.641 3 10.5 3L10 3L10 13ZM7 9L9 9L9 3L7 3L7 9Z'/%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='M10 13C10 13.254 9.953 13.5 9.86 13.736C9.758 13.993 9.609 14.219 9.414 14.414C9.219 14.609 8.993 14.758 8.736 14.86C8.5 14.953 8.254 15 8 15C7.746 15 7.5 14.953 7.264 14.86C7.007 14.758 6.781 14.609 6.586 14.414C6.391 14.219 6.242 13.993 6.14 13.736C6.047 13.5 6 13.254 6 13L6 3L5.5 3C5.359 3 5.241 2.952 5.144 2.856C5.048 2.759 5 2.641 5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2L10.5 2C10.641 2 10.759 2.048 10.856 2.144C10.952 2.241 11 2.359 11 2.5C11 2.641 10.952 2.759 10.856 2.856C10.759 2.952 10.641 3 10.5 3L10 3L10 13ZM7 9L9 9L9 3L7 3L7 9Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "test-tube" (line-round), MIT. https://gentleface.com/icons/test-tube import SwiftUI struct TestTubeIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 10, y: 13)) p.addCurve(to: CGPoint(x: 9.86, y: 13.736), control1: CGPoint(x: 10, y: 13.254), control2: CGPoint(x: 9.953, y: 13.5)) p.addCurve(to: CGPoint(x: 9.414, y: 14.414), control1: CGPoint(x: 9.758, y: 13.993), control2: CGPoint(x: 9.609, y: 14.219)) p.addCurve(to: CGPoint(x: 8.736, y: 14.86), control1: CGPoint(x: 9.219, y: 14.609), control2: CGPoint(x: 8.993, y: 14.758)) p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 8.5, y: 14.953), control2: CGPoint(x: 8.254, y: 15)) p.addCurve(to: CGPoint(x: 7.264, y: 14.86), control1: CGPoint(x: 7.746, y: 15), control2: CGPoint(x: 7.5, y: 14.953)) p.addCurve(to: CGPoint(x: 6.586, y: 14.414), control1: CGPoint(x: 7.007, y: 14.758), control2: CGPoint(x: 6.781, y: 14.609)) p.addCurve(to: CGPoint(x: 6.14, y: 13.736), control1: CGPoint(x: 6.391, y: 14.219), control2: CGPoint(x: 6.242, y: 13.993)) p.addCurve(to: CGPoint(x: 6, y: 13), control1: CGPoint(x: 6.047, y: 13.5), control2: CGPoint(x: 6, y: 13.254)) p.addLine(to: CGPoint(x: 6, y: 3)) p.addLine(to: CGPoint(x: 5.5, y: 3)) p.addCurve(to: CGPoint(x: 5.144, y: 2.856), control1: CGPoint(x: 5.359, y: 3), control2: CGPoint(x: 5.241, y: 2.952)) p.addCurve(to: CGPoint(x: 5, y: 2.5), control1: CGPoint(x: 5.048, y: 2.759), control2: CGPoint(x: 5, y: 2.641)) p.addCurve(to: CGPoint(x: 5.144, y: 2.144), control1: CGPoint(x: 5, y: 2.359), control2: CGPoint(x: 5.048, y: 2.241)) p.addCurve(to: CGPoint(x: 5.5, y: 2), control1: CGPoint(x: 5.241, y: 2.048), control2: CGPoint(x: 5.359, y: 2)) p.addLine(to: CGPoint(x: 10.5, y: 2)) p.addCurve(to: CGPoint(x: 10.856, y: 2.144), control1: CGPoint(x: 10.641, y: 2), control2: CGPoint(x: 10.759, y: 2.048)) p.addCurve(to: CGPoint(x: 11, y: 2.5), control1: CGPoint(x: 10.952, y: 2.241), control2: CGPoint(x: 11, y: 2.359)) p.addCurve(to: CGPoint(x: 10.856, y: 2.856), control1: CGPoint(x: 11, y: 2.641), control2: CGPoint(x: 10.952, y: 2.759)) p.addCurve(to: CGPoint(x: 10.5, y: 3), control1: CGPoint(x: 10.759, y: 2.952), control2: CGPoint(x: 10.641, y: 3)) p.addLine(to: CGPoint(x: 10, y: 3)) p.addLine(to: CGPoint(x: 10, y: 13)) p.closeSubpath() p.move(to: CGPoint(x: 7, y: 9)) p.addLine(to: CGPoint(x: 9, y: 9)) p.addLine(to: CGPoint(x: 9, y: 3)) p.addLine(to: CGPoint(x: 7, y: 3)) p.addLine(to: CGPoint(x: 7, y: 9)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // TestTubeIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "test-tube" (line-round), MIT. https://gentleface.com/icons/test-tube 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 TestTubeIcon: ImageVector by lazy { ImageVector.Builder( name = "test-tube", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M10 13C10 13.254 9.953 13.5 9.86 13.736C9.758 13.993 9.609 14.219 9.414 14.414C9.219 14.609 8.993 14.758 8.736 14.86C8.5 14.953 8.254 15 8 15C7.746 15 7.5 14.953 7.264 14.86C7.007 14.758 6.781 14.609 6.586 14.414C6.391 14.219 6.242 13.993 6.14 13.736C6.047 13.5 6 13.254 6 13L6 3L5.5 3C5.359 3 5.241 2.952 5.144 2.856C5.048 2.759 5 2.641 5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2L10.5 2C10.641 2 10.759 2.048 10.856 2.144C10.952 2.241 11 2.359 11 2.5C11 2.641 10.952 2.759 10.856 2.856C10.759 2.952 10.641 3 10.5 3L10 3L10 13ZM7 9L9 9L9 3L7 3L7 9Z"), fill = SolidColor(Color.Black), ).build() } // Icon(TestTubeIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "test-tube" (line-round), MIT. https://gentleface.com/icons/test-tube import 'package:flutter/widgets.dart'; class TestTubeIcon extends StatelessWidget { const TestTubeIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _TestTubeIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _TestTubeIconPainter extends CustomPainter { _TestTubeIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(10, 13) ..cubicTo(10, 13.254, 9.953, 13.5, 9.86, 13.736) ..cubicTo(9.758, 13.993, 9.609, 14.219, 9.414, 14.414) ..cubicTo(9.219, 14.609, 8.993, 14.758, 8.736, 14.86) ..cubicTo(8.5, 14.953, 8.254, 15, 8, 15) ..cubicTo(7.746, 15, 7.5, 14.953, 7.264, 14.86) ..cubicTo(7.007, 14.758, 6.781, 14.609, 6.586, 14.414) ..cubicTo(6.391, 14.219, 6.242, 13.993, 6.14, 13.736) ..cubicTo(6.047, 13.5, 6, 13.254, 6, 13) ..lineTo(6, 3) ..lineTo(5.5, 3) ..cubicTo(5.359, 3, 5.241, 2.952, 5.144, 2.856) ..cubicTo(5.048, 2.759, 5, 2.641, 5, 2.5) ..cubicTo(5, 2.359, 5.048, 2.241, 5.144, 2.144) ..cubicTo(5.241, 2.048, 5.359, 2, 5.5, 2) ..lineTo(10.5, 2) ..cubicTo(10.641, 2, 10.759, 2.048, 10.856, 2.144) ..cubicTo(10.952, 2.241, 11, 2.359, 11, 2.5) ..cubicTo(11, 2.641, 10.952, 2.759, 10.856, 2.856) ..cubicTo(10.759, 2.952, 10.641, 3, 10.5, 3) ..lineTo(10, 3) ..lineTo(10, 13) ..close() ..moveTo(7, 9) ..lineTo(9, 9) ..lineTo(9, 3) ..lineTo(7, 3) ..lineTo(7, 9) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_TestTubeIconPainter old) => old.color != color; } ```