# activity icon Activity. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/activity - Category: Charts & data - Use it for: activity, pulse, monitoring, system monitor, uptime monitoring, observability - Tags: pulse, heartbeat, vitals, ecg, health, monitor - Family: activity-search, area-chart, area-chart-stacked, bar-chart, bar-chart-clock, bar-chart-grouped, bar-chart-grouped-filled, bar-chart-horizontal, bar-chart-off, bar-chart-pencil, bar-chart-plus, bar-chart-search, bar-chart-sparkle, bar-chart-stacked, bubble-chart, candlestick-chart, cohort-chart, combo-chart, donut-chart, funnel-chart, gantt-chart, heatmap, histogram, line-chart, pie-chart, radar-chart, scatter-chart, treemap, trending-down, trending-up, trending-up-down, venn-diagram, waterfall-chart - Component name: ActivityIcon - Added: 2026-10-14 ## Alternatives - `heart-pulse`: heart rate and health - `line-chart`: a metric over time with axes (line-chart) - `gauge`: a single level or performance score (gauge) - `server-check`: server health checks passing (server-online) ## Also fits - performance: live monitoring over time (monitoring) - heart rate: pulse, monitoring or an activity graph ## 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/activity.svg · PNG https://gentleface.com/png/line-round/16/activity.png · https://gentleface.com/png/line-round/32/activity.png · https://gentleface.com/png/line-round/48/activity.png - line-soft: https://gentleface.com/svg/line-soft/16/activity.svg · PNG https://gentleface.com/png/line-soft/16/activity.png · https://gentleface.com/png/line-soft/32/activity.png · https://gentleface.com/png/line-soft/48/activity.png - line-sharp: https://gentleface.com/svg/line-sharp/16/activity.svg · PNG https://gentleface.com/png/line-sharp/16/activity.png · https://gentleface.com/png/line-sharp/32/activity.png · https://gentleface.com/png/line-sharp/48/activity.png - solid-round: https://gentleface.com/svg/solid-round/16/activity.svg · PNG https://gentleface.com/png/solid-round/16/activity.png · https://gentleface.com/png/solid-round/32/activity.png · https://gentleface.com/png/solid-round/48/activity.png - solid-soft: https://gentleface.com/svg/solid-soft/16/activity.svg · PNG https://gentleface.com/png/solid-soft/16/activity.png · https://gentleface.com/png/solid-soft/32/activity.png · https://gentleface.com/png/solid-soft/48/activity.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/activity.svg · PNG https://gentleface.com/png/solid-sharp/16/activity.png · https://gentleface.com/png/solid-sharp/32/activity.png · https://gentleface.com/png/solid-sharp/48/activity.png The SVG of every style: https://gentleface.com/icons/activity.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 "activity" (line-round), MIT. https://gentleface.com/icons/activity import type { SVGProps } from 'react'; export function ActivityIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "activity" (line-round), MIT. https://gentleface.com/icons/activity. Takes the text color. */ .icon-activity { 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='M5.053 3.276C5.116 3.15 5.212 3.066 5.341 3.023C5.47 2.98 5.598 2.99 5.724 3.053C5.823 3.102 5.898 3.177 5.947 3.276L9.5 10.382L11.053 7.276C11.096 7.191 11.157 7.124 11.237 7.074C11.317 7.025 11.404 7 11.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L11.809 8L9.947 11.724C9.898 11.823 9.823 11.898 9.724 11.947C9.6 12.009 9.473 12.018 9.342 11.974C9.211 11.931 9.115 11.847 9.053 11.724L5.5 4.618L3.947 7.724C3.904 7.809 3.843 7.876 3.763 7.926C3.683 7.975 3.596 8 3.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L3.191 7L5.053 3.276Z'/%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='M5.053 3.276C5.116 3.15 5.212 3.066 5.341 3.023C5.47 2.98 5.598 2.99 5.724 3.053C5.823 3.102 5.898 3.177 5.947 3.276L9.5 10.382L11.053 7.276C11.096 7.191 11.157 7.124 11.237 7.074C11.317 7.025 11.404 7 11.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L11.809 8L9.947 11.724C9.898 11.823 9.823 11.898 9.724 11.947C9.6 12.009 9.473 12.018 9.342 11.974C9.211 11.931 9.115 11.847 9.053 11.724L5.5 4.618L3.947 7.724C3.904 7.809 3.843 7.876 3.763 7.926C3.683 7.975 3.596 8 3.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L3.191 7L5.053 3.276Z'/%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='M5.053 3.276C5.116 3.15 5.212 3.066 5.341 3.023C5.47 2.98 5.598 2.99 5.724 3.053C5.823 3.102 5.898 3.177 5.947 3.276L9.5 10.382L11.053 7.276C11.096 7.191 11.157 7.124 11.237 7.074C11.317 7.025 11.404 7 11.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L11.809 8L9.947 11.724C9.898 11.823 9.823 11.898 9.724 11.947C9.6 12.009 9.473 12.018 9.342 11.974C9.211 11.931 9.115 11.847 9.053 11.724L5.5 4.618L3.947 7.724C3.904 7.809 3.843 7.876 3.763 7.926C3.683 7.975 3.596 8 3.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L3.191 7L5.053 3.276Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "activity" (line-round), MIT. https://gentleface.com/icons/activity import SwiftUI struct ActivityIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 5.053, y: 3.276)) p.addCurve(to: CGPoint(x: 5.341, y: 3.023), control1: CGPoint(x: 5.116, y: 3.15), control2: CGPoint(x: 5.212, y: 3.066)) p.addCurve(to: CGPoint(x: 5.724, y: 3.053), control1: CGPoint(x: 5.47, y: 2.98), control2: CGPoint(x: 5.598, y: 2.99)) p.addCurve(to: CGPoint(x: 5.947, y: 3.276), control1: CGPoint(x: 5.823, y: 3.102), control2: CGPoint(x: 5.898, y: 3.177)) p.addLine(to: CGPoint(x: 9.5, y: 10.382)) p.addLine(to: CGPoint(x: 11.053, y: 7.276)) p.addCurve(to: CGPoint(x: 11.237, y: 7.074), control1: CGPoint(x: 11.096, y: 7.191), control2: CGPoint(x: 11.157, y: 7.124)) p.addCurve(to: CGPoint(x: 11.5, y: 7), control1: CGPoint(x: 11.317, y: 7.025), control2: CGPoint(x: 11.404, y: 7)) p.addLine(to: CGPoint(x: 13.5, y: 7)) p.addCurve(to: CGPoint(x: 13.856, y: 7.144), control1: CGPoint(x: 13.641, y: 7), control2: CGPoint(x: 13.759, y: 7.048)) p.addCurve(to: CGPoint(x: 14, y: 7.5), control1: CGPoint(x: 13.952, y: 7.241), control2: CGPoint(x: 14, y: 7.359)) p.addCurve(to: CGPoint(x: 13.856, y: 7.856), control1: CGPoint(x: 14, y: 7.641), control2: CGPoint(x: 13.952, y: 7.759)) p.addCurve(to: CGPoint(x: 13.5, y: 8), control1: CGPoint(x: 13.759, y: 7.952), control2: CGPoint(x: 13.641, y: 8)) p.addLine(to: CGPoint(x: 11.809, y: 8)) p.addLine(to: CGPoint(x: 9.947, y: 11.724)) p.addCurve(to: CGPoint(x: 9.724, y: 11.947), control1: CGPoint(x: 9.898, y: 11.823), control2: CGPoint(x: 9.823, y: 11.898)) p.addCurve(to: CGPoint(x: 9.342, y: 11.974), control1: CGPoint(x: 9.6, y: 12.009), control2: CGPoint(x: 9.473, y: 12.018)) p.addCurve(to: CGPoint(x: 9.053, y: 11.724), control1: CGPoint(x: 9.211, y: 11.931), control2: CGPoint(x: 9.115, y: 11.847)) p.addLine(to: CGPoint(x: 5.5, y: 4.618)) p.addLine(to: CGPoint(x: 3.947, y: 7.724)) p.addCurve(to: CGPoint(x: 3.763, y: 7.926), control1: CGPoint(x: 3.904, y: 7.809), control2: CGPoint(x: 3.843, y: 7.876)) p.addCurve(to: CGPoint(x: 3.5, y: 8), control1: CGPoint(x: 3.683, y: 7.975), control2: CGPoint(x: 3.596, y: 8)) p.addLine(to: CGPoint(x: 1.5, y: 8)) p.addCurve(to: CGPoint(x: 1.144, y: 7.856), control1: CGPoint(x: 1.359, y: 8), control2: CGPoint(x: 1.241, y: 7.952)) p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.048, y: 7.759), control2: CGPoint(x: 1, y: 7.641)) p.addCurve(to: CGPoint(x: 1.144, y: 7.144), control1: CGPoint(x: 1, y: 7.359), control2: CGPoint(x: 1.048, y: 7.241)) p.addCurve(to: CGPoint(x: 1.5, y: 7), control1: CGPoint(x: 1.241, y: 7.048), control2: CGPoint(x: 1.359, y: 7)) p.addLine(to: CGPoint(x: 3.191, y: 7)) p.addLine(to: CGPoint(x: 5.053, y: 3.276)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ActivityIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "activity" (line-round), MIT. https://gentleface.com/icons/activity 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 ActivityIcon: ImageVector by lazy { ImageVector.Builder( name = "activity", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M5.053 3.276C5.116 3.15 5.212 3.066 5.341 3.023C5.47 2.98 5.598 2.99 5.724 3.053C5.823 3.102 5.898 3.177 5.947 3.276L9.5 10.382L11.053 7.276C11.096 7.191 11.157 7.124 11.237 7.074C11.317 7.025 11.404 7 11.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L11.809 8L9.947 11.724C9.898 11.823 9.823 11.898 9.724 11.947C9.6 12.009 9.473 12.018 9.342 11.974C9.211 11.931 9.115 11.847 9.053 11.724L5.5 4.618L3.947 7.724C3.904 7.809 3.843 7.876 3.763 7.926C3.683 7.975 3.596 8 3.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L3.191 7L5.053 3.276Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ActivityIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "activity" (line-round), MIT. https://gentleface.com/icons/activity import 'package:flutter/widgets.dart'; class ActivityIcon extends StatelessWidget { const ActivityIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ActivityIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ActivityIconPainter extends CustomPainter { _ActivityIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(5.053, 3.276) ..cubicTo(5.116, 3.15, 5.212, 3.066, 5.341, 3.023) ..cubicTo(5.47, 2.98, 5.598, 2.99, 5.724, 3.053) ..cubicTo(5.823, 3.102, 5.898, 3.177, 5.947, 3.276) ..lineTo(9.5, 10.382) ..lineTo(11.053, 7.276) ..cubicTo(11.096, 7.191, 11.157, 7.124, 11.237, 7.074) ..cubicTo(11.317, 7.025, 11.404, 7, 11.5, 7) ..lineTo(13.5, 7) ..cubicTo(13.641, 7, 13.759, 7.048, 13.856, 7.144) ..cubicTo(13.952, 7.241, 14, 7.359, 14, 7.5) ..cubicTo(14, 7.641, 13.952, 7.759, 13.856, 7.856) ..cubicTo(13.759, 7.952, 13.641, 8, 13.5, 8) ..lineTo(11.809, 8) ..lineTo(9.947, 11.724) ..cubicTo(9.898, 11.823, 9.823, 11.898, 9.724, 11.947) ..cubicTo(9.6, 12.009, 9.473, 12.018, 9.342, 11.974) ..cubicTo(9.211, 11.931, 9.115, 11.847, 9.053, 11.724) ..lineTo(5.5, 4.618) ..lineTo(3.947, 7.724) ..cubicTo(3.904, 7.809, 3.843, 7.876, 3.763, 7.926) ..cubicTo(3.683, 7.975, 3.596, 8, 3.5, 8) ..lineTo(1.5, 8) ..cubicTo(1.359, 8, 1.241, 7.952, 1.144, 7.856) ..cubicTo(1.048, 7.759, 1, 7.641, 1, 7.5) ..cubicTo(1, 7.359, 1.048, 7.241, 1.144, 7.144) ..cubicTo(1.241, 7.048, 1.359, 7, 1.5, 7) ..lineTo(3.191, 7) ..lineTo(5.053, 3.276) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ActivityIconPainter old) => old.color != color; } ```