# spirit-level icon
Spirit level. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/spirit-level
- Category: Tools
- Use it for: spirit level, level surface, bubble level
- Tags: spirit-level, level-surface
- Component name: SpiritLevelIcon
- Added: 2026-10-30
## 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/spirit-level.svg · PNG https://gentleface.com/png/line-round/16/spirit-level.png · https://gentleface.com/png/line-round/32/spirit-level.png · https://gentleface.com/png/line-round/48/spirit-level.png
- line-soft: https://gentleface.com/svg/line-soft/16/spirit-level.svg · PNG https://gentleface.com/png/line-soft/16/spirit-level.png · https://gentleface.com/png/line-soft/32/spirit-level.png · https://gentleface.com/png/line-soft/48/spirit-level.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/spirit-level.svg · PNG https://gentleface.com/png/line-sharp/16/spirit-level.png · https://gentleface.com/png/line-sharp/32/spirit-level.png · https://gentleface.com/png/line-sharp/48/spirit-level.png
- solid-round: https://gentleface.com/svg/solid-round/16/spirit-level.svg · PNG https://gentleface.com/png/solid-round/16/spirit-level.png · https://gentleface.com/png/solid-round/32/spirit-level.png · https://gentleface.com/png/solid-round/48/spirit-level.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/spirit-level.svg · PNG https://gentleface.com/png/solid-soft/16/spirit-level.png · https://gentleface.com/png/solid-soft/32/spirit-level.png · https://gentleface.com/png/solid-soft/48/spirit-level.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/spirit-level.svg · PNG https://gentleface.com/png/solid-sharp/16/spirit-level.png · https://gentleface.com/png/solid-sharp/32/spirit-level.png · https://gentleface.com/png/solid-sharp/48/spirit-level.png
The SVG of every style: https://gentleface.com/icons/spirit-level.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 "spirit-level" (line-round), MIT. https://gentleface.com/icons/spirit-level
import type { SVGProps } from 'react';
export function SpiritLevelIcon(props: SVGProps) {
return (
);
}
```
### Vue
```vue
```
### Svelte
```svelte
```
### HTML img
```html
```
### CSS
```css
/* Gentleface "spirit-level" (line-round), MIT. https://gentleface.com/icons/spirit-level. Takes the text color. */
.icon-spirit-level {
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='M13 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 6C1 5.724 1.098 5.488 1.293 5.293C1.488 5.098 1.724 5 2 5L13 5C13.276 5 13.512 5.098 13.707 5.293C13.902 5.488 14 5.724 14 6L14 10C14 10.276 13.902 10.512 13.707 10.707C13.512 10.902 13.276 11 13 11ZM13 10L13 6L11 6L11 7C11 7.254 10.953 7.5 10.86 7.736C10.758 7.993 10.609 8.219 10.414 8.414C10.219 8.609 9.993 8.758 9.736 8.86C9.5 8.953 9.254 9 9 9L6 9C5.746 9 5.5 8.953 5.264 8.86C5.007 8.758 4.781 8.609 4.586 8.414C4.391 8.219 4.242 7.993 4.14 7.736C4.047 7.5 4 7.254 4 7L4 6L2 6L2 10L13 10ZM5 7C5 7.276 5.098 7.512 5.293 7.707C5.488 7.902 5.724 8 6 8L7 8L7 6L5 6L5 7ZM9.707 7.707C9.902 7.512 10 7.276 10 7L10 6L8 6L8 8L9 8C9.276 8 9.512 7.902 9.707 7.707Z'/%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='M13 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 6C1 5.724 1.098 5.488 1.293 5.293C1.488 5.098 1.724 5 2 5L13 5C13.276 5 13.512 5.098 13.707 5.293C13.902 5.488 14 5.724 14 6L14 10C14 10.276 13.902 10.512 13.707 10.707C13.512 10.902 13.276 11 13 11ZM13 10L13 6L11 6L11 7C11 7.254 10.953 7.5 10.86 7.736C10.758 7.993 10.609 8.219 10.414 8.414C10.219 8.609 9.993 8.758 9.736 8.86C9.5 8.953 9.254 9 9 9L6 9C5.746 9 5.5 8.953 5.264 8.86C5.007 8.758 4.781 8.609 4.586 8.414C4.391 8.219 4.242 7.993 4.14 7.736C4.047 7.5 4 7.254 4 7L4 6L2 6L2 10L13 10ZM5 7C5 7.276 5.098 7.512 5.293 7.707C5.488 7.902 5.724 8 6 8L7 8L7 6L5 6L5 7ZM9.707 7.707C9.902 7.512 10 7.276 10 7L10 6L8 6L8 8L9 8C9.276 8 9.512 7.902 9.707 7.707Z'/%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='M13 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 6C1 5.724 1.098 5.488 1.293 5.293C1.488 5.098 1.724 5 2 5L13 5C13.276 5 13.512 5.098 13.707 5.293C13.902 5.488 14 5.724 14 6L14 10C14 10.276 13.902 10.512 13.707 10.707C13.512 10.902 13.276 11 13 11ZM13 10L13 6L11 6L11 7C11 7.254 10.953 7.5 10.86 7.736C10.758 7.993 10.609 8.219 10.414 8.414C10.219 8.609 9.993 8.758 9.736 8.86C9.5 8.953 9.254 9 9 9L6 9C5.746 9 5.5 8.953 5.264 8.86C5.007 8.758 4.781 8.609 4.586 8.414C4.391 8.219 4.242 7.993 4.14 7.736C4.047 7.5 4 7.254 4 7L4 6L2 6L2 10L13 10ZM5 7C5 7.276 5.098 7.512 5.293 7.707C5.488 7.902 5.724 8 6 8L7 8L7 6L5 6L5 7ZM9.707 7.707C9.902 7.512 10 7.276 10 7L10 6L8 6L8 8L9 8C9.276 8 9.512 7.902 9.707 7.707Z'/%3E%3C/svg%3E
```
### Sprite
```html
```
### SwiftUI
```swift
// Gentleface "spirit-level" (line-round), MIT. https://gentleface.com/icons/spirit-level
import SwiftUI
struct SpiritLevelIcon: Shape {
func path(in rect: CGRect) -> Path {
var p = Path()
p.move(to: CGPoint(x: 13, y: 11))
p.addLine(to: CGPoint(x: 2, y: 11))
p.addCurve(to: CGPoint(x: 1.293, y: 10.707), control1: CGPoint(x: 1.724, y: 11), control2: CGPoint(x: 1.488, y: 10.902))
p.addCurve(to: CGPoint(x: 1, y: 10), control1: CGPoint(x: 1.098, y: 10.512), control2: CGPoint(x: 1, y: 10.276))
p.addLine(to: CGPoint(x: 1, y: 6))
p.addCurve(to: CGPoint(x: 1.293, y: 5.293), control1: CGPoint(x: 1, y: 5.724), control2: CGPoint(x: 1.098, y: 5.488))
p.addCurve(to: CGPoint(x: 2, y: 5), control1: CGPoint(x: 1.488, y: 5.098), control2: CGPoint(x: 1.724, y: 5))
p.addLine(to: CGPoint(x: 13, y: 5))
p.addCurve(to: CGPoint(x: 13.707, y: 5.293), control1: CGPoint(x: 13.276, y: 5), control2: CGPoint(x: 13.512, y: 5.098))
p.addCurve(to: CGPoint(x: 14, y: 6), control1: CGPoint(x: 13.902, y: 5.488), control2: CGPoint(x: 14, y: 5.724))
p.addLine(to: CGPoint(x: 14, y: 10))
p.addCurve(to: CGPoint(x: 13.707, y: 10.707), control1: CGPoint(x: 14, y: 10.276), control2: CGPoint(x: 13.902, y: 10.512))
p.addCurve(to: CGPoint(x: 13, y: 11), control1: CGPoint(x: 13.512, y: 10.902), control2: CGPoint(x: 13.276, y: 11))
p.closeSubpath()
p.move(to: CGPoint(x: 13, y: 10))
p.addLine(to: CGPoint(x: 13, y: 6))
p.addLine(to: CGPoint(x: 11, y: 6))
p.addLine(to: CGPoint(x: 11, y: 7))
p.addCurve(to: CGPoint(x: 10.86, y: 7.736), control1: CGPoint(x: 11, y: 7.254), control2: CGPoint(x: 10.953, y: 7.5))
p.addCurve(to: CGPoint(x: 10.414, y: 8.414), control1: CGPoint(x: 10.758, y: 7.993), control2: CGPoint(x: 10.609, y: 8.219))
p.addCurve(to: CGPoint(x: 9.736, y: 8.86), control1: CGPoint(x: 10.219, y: 8.609), control2: CGPoint(x: 9.993, y: 8.758))
p.addCurve(to: CGPoint(x: 9, y: 9), control1: CGPoint(x: 9.5, y: 8.953), control2: CGPoint(x: 9.254, y: 9))
p.addLine(to: CGPoint(x: 6, y: 9))
p.addCurve(to: CGPoint(x: 5.264, y: 8.86), control1: CGPoint(x: 5.746, y: 9), control2: CGPoint(x: 5.5, y: 8.953))
p.addCurve(to: CGPoint(x: 4.586, y: 8.414), control1: CGPoint(x: 5.007, y: 8.758), control2: CGPoint(x: 4.781, y: 8.609))
p.addCurve(to: CGPoint(x: 4.14, y: 7.736), control1: CGPoint(x: 4.391, y: 8.219), control2: CGPoint(x: 4.242, y: 7.993))
p.addCurve(to: CGPoint(x: 4, y: 7), control1: CGPoint(x: 4.047, y: 7.5), control2: CGPoint(x: 4, y: 7.254))
p.addLine(to: CGPoint(x: 4, y: 6))
p.addLine(to: CGPoint(x: 2, y: 6))
p.addLine(to: CGPoint(x: 2, y: 10))
p.addLine(to: CGPoint(x: 13, y: 10))
p.closeSubpath()
p.move(to: CGPoint(x: 5, y: 7))
p.addCurve(to: CGPoint(x: 5.293, y: 7.707), control1: CGPoint(x: 5, y: 7.276), control2: CGPoint(x: 5.098, y: 7.512))
p.addCurve(to: CGPoint(x: 6, y: 8), control1: CGPoint(x: 5.488, y: 7.902), control2: CGPoint(x: 5.724, y: 8))
p.addLine(to: CGPoint(x: 7, y: 8))
p.addLine(to: CGPoint(x: 7, y: 6))
p.addLine(to: CGPoint(x: 5, y: 6))
p.addLine(to: CGPoint(x: 5, y: 7))
p.closeSubpath()
p.move(to: CGPoint(x: 9.707, y: 7.707))
p.addCurve(to: CGPoint(x: 10, y: 7), control1: CGPoint(x: 9.902, y: 7.512), control2: CGPoint(x: 10, y: 7.276))
p.addLine(to: CGPoint(x: 10, y: 6))
p.addLine(to: CGPoint(x: 8, y: 6))
p.addLine(to: CGPoint(x: 8, y: 8))
p.addLine(to: CGPoint(x: 9, y: 8))
p.addCurve(to: CGPoint(x: 9.707, y: 7.707), control1: CGPoint(x: 9.276, y: 8), control2: CGPoint(x: 9.512, y: 7.902))
p.closeSubpath()
return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
}
}
// SpiritLevelIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```
### Compose
```kotlin
// Gentleface "spirit-level" (line-round), MIT. https://gentleface.com/icons/spirit-level
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 SpiritLevelIcon: ImageVector by lazy {
ImageVector.Builder(
name = "spirit-level", defaultWidth = 16.dp, defaultHeight = 16.dp,
viewportWidth = 16f, viewportHeight = 16f,
).addPath(
pathData = addPathNodes("M13 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 6C1 5.724 1.098 5.488 1.293 5.293C1.488 5.098 1.724 5 2 5L13 5C13.276 5 13.512 5.098 13.707 5.293C13.902 5.488 14 5.724 14 6L14 10C14 10.276 13.902 10.512 13.707 10.707C13.512 10.902 13.276 11 13 11ZM13 10L13 6L11 6L11 7C11 7.254 10.953 7.5 10.86 7.736C10.758 7.993 10.609 8.219 10.414 8.414C10.219 8.609 9.993 8.758 9.736 8.86C9.5 8.953 9.254 9 9 9L6 9C5.746 9 5.5 8.953 5.264 8.86C5.007 8.758 4.781 8.609 4.586 8.414C4.391 8.219 4.242 7.993 4.14 7.736C4.047 7.5 4 7.254 4 7L4 6L2 6L2 10L13 10ZM5 7C5 7.276 5.098 7.512 5.293 7.707C5.488 7.902 5.724 8 6 8L7 8L7 6L5 6L5 7ZM9.707 7.707C9.902 7.512 10 7.276 10 7L10 6L8 6L8 8L9 8C9.276 8 9.512 7.902 9.707 7.707Z"),
fill = SolidColor(Color.Black),
).build()
}
// Icon(SpiritLevelIcon, contentDescription = null) tints it with LocalContentColor.
```
### Android XML
```xml
```
### Flutter
```dart
// Gentleface "spirit-level" (line-round), MIT. https://gentleface.com/icons/spirit-level
import 'package:flutter/widgets.dart';
class SpiritLevelIcon extends StatelessWidget {
const SpiritLevelIcon({super.key, this.size = 16, this.color});
final double size;
final Color? color;
@override
Widget build(BuildContext context) => CustomPaint(
size: Size.square(size),
painter: _SpiritLevelIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
);
}
class _SpiritLevelIconPainter extends CustomPainter {
_SpiritLevelIconPainter(this.color);
final Color color;
@override
void paint(Canvas canvas, Size size) {
canvas.scale(size.width / 16, size.height / 16);
final p = Path()
..moveTo(13, 11)
..lineTo(2, 11)
..cubicTo(1.724, 11, 1.488, 10.902, 1.293, 10.707)
..cubicTo(1.098, 10.512, 1, 10.276, 1, 10)
..lineTo(1, 6)
..cubicTo(1, 5.724, 1.098, 5.488, 1.293, 5.293)
..cubicTo(1.488, 5.098, 1.724, 5, 2, 5)
..lineTo(13, 5)
..cubicTo(13.276, 5, 13.512, 5.098, 13.707, 5.293)
..cubicTo(13.902, 5.488, 14, 5.724, 14, 6)
..lineTo(14, 10)
..cubicTo(14, 10.276, 13.902, 10.512, 13.707, 10.707)
..cubicTo(13.512, 10.902, 13.276, 11, 13, 11)
..close()
..moveTo(13, 10)
..lineTo(13, 6)
..lineTo(11, 6)
..lineTo(11, 7)
..cubicTo(11, 7.254, 10.953, 7.5, 10.86, 7.736)
..cubicTo(10.758, 7.993, 10.609, 8.219, 10.414, 8.414)
..cubicTo(10.219, 8.609, 9.993, 8.758, 9.736, 8.86)
..cubicTo(9.5, 8.953, 9.254, 9, 9, 9)
..lineTo(6, 9)
..cubicTo(5.746, 9, 5.5, 8.953, 5.264, 8.86)
..cubicTo(5.007, 8.758, 4.781, 8.609, 4.586, 8.414)
..cubicTo(4.391, 8.219, 4.242, 7.993, 4.14, 7.736)
..cubicTo(4.047, 7.5, 4, 7.254, 4, 7)
..lineTo(4, 6)
..lineTo(2, 6)
..lineTo(2, 10)
..lineTo(13, 10)
..close()
..moveTo(5, 7)
..cubicTo(5, 7.276, 5.098, 7.512, 5.293, 7.707)
..cubicTo(5.488, 7.902, 5.724, 8, 6, 8)
..lineTo(7, 8)
..lineTo(7, 6)
..lineTo(5, 6)
..lineTo(5, 7)
..close()
..moveTo(9.707, 7.707)
..cubicTo(9.902, 7.512, 10, 7.276, 10, 7)
..lineTo(10, 6)
..lineTo(8, 6)
..lineTo(8, 8)
..lineTo(9, 8)
..cubicTo(9.276, 8, 9.512, 7.902, 9.707, 7.707)
..close();
canvas.drawPath(p, Paint()..color = color);
}
@override
bool shouldRepaint(_SpiritLevelIconPainter old) => old.color != color;
}
```