# archive icon Archive. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/archive - Category: Files & folders - Use it for: archive, archived, storage box, move to archive - Tags: box, storage, archive, store, keep - Family: archive-arrow-up, archive-clock, archive-lock, archive-search - Component name: ArchiveIcon - Added: 2026-10-14 ## Alternatives - `file-zip`: the archive as a file format: a .zip, .rar or .7z file (archive-file) ## Don't confuse with - `package`: a box without the lid and slot reads as package or product - `trash`: trash deletes; archive keeps items, out of view ## Not for - package (use `package`): archive is the box with lid and slot - inbox (use `inbox`): archive is the box with a lid - zip file (use `file-zip`): the archive box means store away (archive), not a compressed file - treasure (use `treasure-chest`): archive is the archive box ## 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/archive.svg · PNG https://gentleface.com/png/line-round/16/archive.png · https://gentleface.com/png/line-round/32/archive.png · https://gentleface.com/png/line-round/48/archive.png - line-soft: https://gentleface.com/svg/line-soft/16/archive.svg · PNG https://gentleface.com/png/line-soft/16/archive.png · https://gentleface.com/png/line-soft/32/archive.png · https://gentleface.com/png/line-soft/48/archive.png - line-sharp: https://gentleface.com/svg/line-sharp/16/archive.svg · PNG https://gentleface.com/png/line-sharp/16/archive.png · https://gentleface.com/png/line-sharp/32/archive.png · https://gentleface.com/png/line-sharp/48/archive.png - solid-round: https://gentleface.com/svg/solid-round/16/archive.svg · PNG https://gentleface.com/png/solid-round/16/archive.png · https://gentleface.com/png/solid-round/32/archive.png · https://gentleface.com/png/solid-round/48/archive.png - solid-soft: https://gentleface.com/svg/solid-soft/16/archive.svg · PNG https://gentleface.com/png/solid-soft/16/archive.png · https://gentleface.com/png/solid-soft/32/archive.png · https://gentleface.com/png/solid-soft/48/archive.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/archive.svg · PNG https://gentleface.com/png/solid-sharp/16/archive.png · https://gentleface.com/png/solid-sharp/32/archive.png · https://gentleface.com/png/solid-sharp/48/archive.png The SVG of every style: https://gentleface.com/icons/archive.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 "archive" (line-round), MIT. https://gentleface.com/icons/archive import type { SVGProps } from 'react'; export function ArchiveIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "archive" (line-round), MIT. https://gentleface.com/icons/archive. Takes the text color. */ .icon-archive { 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.707 5.707C14.512 5.902 14.276 6 14 6L14 13C14 13.276 13.902 13.512 13.707 13.707C13.512 13.902 13.276 14 13 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 5C15 5.276 14.902 5.512 14.707 5.707ZM2.5 5.131C2.584 5.047 2.699 5 2.818 5L13.182 5C13.301 5 13.416 5.047 13.5 5.131C13.649 5.044 13.815 5 14 5L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 5C2.185 5 2.351 5.044 2.5 5.131ZM13 13L13 6L3 6L3 13L13 13ZM9.856 8.144C9.952 8.241 10 8.359 10 8.5C10 8.641 9.952 8.759 9.856 8.856C9.759 8.952 9.641 9 9.5 9L6.5 9C6.359 9 6.241 8.952 6.144 8.856C6.048 8.759 6 8.641 6 8.5C6 8.359 6.048 8.241 6.144 8.144C6.241 8.048 6.359 8 6.5 8L9.5 8C9.641 8 9.759 8.048 9.856 8.144Z'/%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.707 5.707C14.512 5.902 14.276 6 14 6L14 13C14 13.276 13.902 13.512 13.707 13.707C13.512 13.902 13.276 14 13 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 5C15 5.276 14.902 5.512 14.707 5.707ZM2.5 5.131C2.584 5.047 2.699 5 2.818 5L13.182 5C13.301 5 13.416 5.047 13.5 5.131C13.649 5.044 13.815 5 14 5L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 5C2.185 5 2.351 5.044 2.5 5.131ZM13 13L13 6L3 6L3 13L13 13ZM9.856 8.144C9.952 8.241 10 8.359 10 8.5C10 8.641 9.952 8.759 9.856 8.856C9.759 8.952 9.641 9 9.5 9L6.5 9C6.359 9 6.241 8.952 6.144 8.856C6.048 8.759 6 8.641 6 8.5C6 8.359 6.048 8.241 6.144 8.144C6.241 8.048 6.359 8 6.5 8L9.5 8C9.641 8 9.759 8.048 9.856 8.144Z'/%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.707 5.707C14.512 5.902 14.276 6 14 6L14 13C14 13.276 13.902 13.512 13.707 13.707C13.512 13.902 13.276 14 13 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 5C15 5.276 14.902 5.512 14.707 5.707ZM2.5 5.131C2.584 5.047 2.699 5 2.818 5L13.182 5C13.301 5 13.416 5.047 13.5 5.131C13.649 5.044 13.815 5 14 5L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 5C2.185 5 2.351 5.044 2.5 5.131ZM13 13L13 6L3 6L3 13L13 13ZM9.856 8.144C9.952 8.241 10 8.359 10 8.5C10 8.641 9.952 8.759 9.856 8.856C9.759 8.952 9.641 9 9.5 9L6.5 9C6.359 9 6.241 8.952 6.144 8.856C6.048 8.759 6 8.641 6 8.5C6 8.359 6.048 8.241 6.144 8.144C6.241 8.048 6.359 8 6.5 8L9.5 8C9.641 8 9.759 8.048 9.856 8.144Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "archive" (line-round), MIT. https://gentleface.com/icons/archive import SwiftUI struct ArchiveIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.707, y: 5.707)) p.addCurve(to: CGPoint(x: 14, y: 6), control1: CGPoint(x: 14.512, y: 5.902), control2: CGPoint(x: 14.276, y: 6)) p.addLine(to: CGPoint(x: 14, y: 13)) p.addCurve(to: CGPoint(x: 13.707, y: 13.707), control1: CGPoint(x: 14, y: 13.276), control2: CGPoint(x: 13.902, y: 13.512)) p.addCurve(to: CGPoint(x: 13, y: 14), control1: CGPoint(x: 13.512, y: 13.902), control2: CGPoint(x: 13.276, y: 14)) p.addLine(to: CGPoint(x: 3, y: 14)) p.addCurve(to: CGPoint(x: 2.293, y: 13.707), control1: CGPoint(x: 2.724, y: 14), control2: CGPoint(x: 2.488, y: 13.902)) p.addCurve(to: CGPoint(x: 2, y: 13), control1: CGPoint(x: 2.098, y: 13.512), control2: CGPoint(x: 2, y: 13.276)) p.addLine(to: CGPoint(x: 2, y: 6)) p.addCurve(to: CGPoint(x: 1.293, y: 5.707), control1: CGPoint(x: 1.724, y: 6), control2: CGPoint(x: 1.488, y: 5.902)) p.addCurve(to: CGPoint(x: 1, y: 5), control1: CGPoint(x: 1.098, y: 5.512), control2: CGPoint(x: 1, y: 5.276)) p.addLine(to: CGPoint(x: 1, y: 4)) p.addCurve(to: CGPoint(x: 1.14, y: 3.264), control1: CGPoint(x: 1, y: 3.746), control2: CGPoint(x: 1.047, y: 3.5)) p.addCurve(to: CGPoint(x: 1.586, y: 2.586), control1: CGPoint(x: 1.242, y: 3.007), control2: CGPoint(x: 1.391, y: 2.781)) p.addCurve(to: CGPoint(x: 2.264, y: 2.14), control1: CGPoint(x: 1.781, y: 2.391), control2: CGPoint(x: 2.007, y: 2.242)) p.addCurve(to: CGPoint(x: 3, y: 2), control1: CGPoint(x: 2.5, y: 2.047), control2: CGPoint(x: 2.746, y: 2)) p.addLine(to: CGPoint(x: 13, y: 2)) p.addCurve(to: CGPoint(x: 13.736, y: 2.14), control1: CGPoint(x: 13.254, y: 2), control2: CGPoint(x: 13.5, y: 2.047)) p.addCurve(to: CGPoint(x: 14.414, y: 2.586), control1: CGPoint(x: 13.993, y: 2.242), control2: CGPoint(x: 14.219, y: 2.391)) p.addCurve(to: CGPoint(x: 14.86, y: 3.264), control1: CGPoint(x: 14.609, y: 2.781), control2: CGPoint(x: 14.758, y: 3.007)) p.addCurve(to: CGPoint(x: 15, y: 4), control1: CGPoint(x: 14.953, y: 3.5), control2: CGPoint(x: 15, y: 3.746)) p.addLine(to: CGPoint(x: 15, y: 5)) p.addCurve(to: CGPoint(x: 14.707, y: 5.707), control1: CGPoint(x: 15, y: 5.276), control2: CGPoint(x: 14.902, y: 5.512)) p.closeSubpath() p.move(to: CGPoint(x: 2.5, y: 5.131)) p.addCurve(to: CGPoint(x: 2.818, y: 5), control1: CGPoint(x: 2.584, y: 5.047), control2: CGPoint(x: 2.699, y: 5)) p.addLine(to: CGPoint(x: 13.182, y: 5)) p.addCurve(to: CGPoint(x: 13.5, y: 5.131), control1: CGPoint(x: 13.301, y: 5), control2: CGPoint(x: 13.416, y: 5.047)) p.addCurve(to: CGPoint(x: 14, y: 5), control1: CGPoint(x: 13.649, y: 5.044), control2: CGPoint(x: 13.815, y: 5)) p.addLine(to: CGPoint(x: 14, y: 4)) p.addCurve(to: CGPoint(x: 13.707, y: 3.293), control1: CGPoint(x: 14, y: 3.724), control2: CGPoint(x: 13.902, y: 3.488)) p.addCurve(to: CGPoint(x: 13, y: 3), control1: CGPoint(x: 13.512, y: 3.098), control2: CGPoint(x: 13.276, y: 3)) p.addLine(to: CGPoint(x: 3, y: 3)) p.addCurve(to: CGPoint(x: 2.293, y: 3.293), control1: CGPoint(x: 2.724, y: 3), control2: CGPoint(x: 2.488, y: 3.098)) p.addCurve(to: CGPoint(x: 2, y: 4), control1: CGPoint(x: 2.098, y: 3.488), control2: CGPoint(x: 2, y: 3.724)) p.addLine(to: CGPoint(x: 2, y: 5)) p.addCurve(to: CGPoint(x: 2.5, y: 5.131), control1: CGPoint(x: 2.185, y: 5), control2: CGPoint(x: 2.351, y: 5.044)) p.closeSubpath() p.move(to: CGPoint(x: 13, y: 13)) p.addLine(to: CGPoint(x: 13, y: 6)) p.addLine(to: CGPoint(x: 3, y: 6)) p.addLine(to: CGPoint(x: 3, y: 13)) p.addLine(to: CGPoint(x: 13, y: 13)) p.closeSubpath() p.move(to: CGPoint(x: 9.856, y: 8.144)) p.addCurve(to: CGPoint(x: 10, y: 8.5), control1: CGPoint(x: 9.952, y: 8.241), control2: CGPoint(x: 10, y: 8.359)) p.addCurve(to: CGPoint(x: 9.856, y: 8.856), control1: CGPoint(x: 10, y: 8.641), control2: CGPoint(x: 9.952, y: 8.759)) p.addCurve(to: CGPoint(x: 9.5, y: 9), control1: CGPoint(x: 9.759, y: 8.952), control2: CGPoint(x: 9.641, y: 9)) p.addLine(to: CGPoint(x: 6.5, y: 9)) p.addCurve(to: CGPoint(x: 6.144, y: 8.856), control1: CGPoint(x: 6.359, y: 9), control2: CGPoint(x: 6.241, y: 8.952)) p.addCurve(to: CGPoint(x: 6, y: 8.5), control1: CGPoint(x: 6.048, y: 8.759), control2: CGPoint(x: 6, y: 8.641)) p.addCurve(to: CGPoint(x: 6.144, y: 8.144), control1: CGPoint(x: 6, y: 8.359), control2: CGPoint(x: 6.048, y: 8.241)) p.addCurve(to: CGPoint(x: 6.5, y: 8), control1: CGPoint(x: 6.241, y: 8.048), control2: CGPoint(x: 6.359, y: 8)) p.addLine(to: CGPoint(x: 9.5, y: 8)) p.addCurve(to: CGPoint(x: 9.856, y: 8.144), control1: CGPoint(x: 9.641, y: 8), control2: CGPoint(x: 9.759, y: 8.048)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ArchiveIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "archive" (line-round), MIT. https://gentleface.com/icons/archive 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 ArchiveIcon: ImageVector by lazy { ImageVector.Builder( name = "archive", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M14.707 5.707C14.512 5.902 14.276 6 14 6L14 13C14 13.276 13.902 13.512 13.707 13.707C13.512 13.902 13.276 14 13 14L3 14C2.724 14 2.488 13.902 2.293 13.707C2.098 13.512 2 13.276 2 13L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 5C15 5.276 14.902 5.512 14.707 5.707ZM2.5 5.131C2.584 5.047 2.699 5 2.818 5L13.182 5C13.301 5 13.416 5.047 13.5 5.131C13.649 5.044 13.815 5 14 5L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 5C2.185 5 2.351 5.044 2.5 5.131ZM13 13L13 6L3 6L3 13L13 13ZM9.856 8.144C9.952 8.241 10 8.359 10 8.5C10 8.641 9.952 8.759 9.856 8.856C9.759 8.952 9.641 9 9.5 9L6.5 9C6.359 9 6.241 8.952 6.144 8.856C6.048 8.759 6 8.641 6 8.5C6 8.359 6.048 8.241 6.144 8.144C6.241 8.048 6.359 8 6.5 8L9.5 8C9.641 8 9.759 8.048 9.856 8.144Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ArchiveIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "archive" (line-round), MIT. https://gentleface.com/icons/archive import 'package:flutter/widgets.dart'; class ArchiveIcon extends StatelessWidget { const ArchiveIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ArchiveIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ArchiveIconPainter extends CustomPainter { _ArchiveIconPainter(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.707, 5.707) ..cubicTo(14.512, 5.902, 14.276, 6, 14, 6) ..lineTo(14, 13) ..cubicTo(14, 13.276, 13.902, 13.512, 13.707, 13.707) ..cubicTo(13.512, 13.902, 13.276, 14, 13, 14) ..lineTo(3, 14) ..cubicTo(2.724, 14, 2.488, 13.902, 2.293, 13.707) ..cubicTo(2.098, 13.512, 2, 13.276, 2, 13) ..lineTo(2, 6) ..cubicTo(1.724, 6, 1.488, 5.902, 1.293, 5.707) ..cubicTo(1.098, 5.512, 1, 5.276, 1, 5) ..lineTo(1, 4) ..cubicTo(1, 3.746, 1.047, 3.5, 1.14, 3.264) ..cubicTo(1.242, 3.007, 1.391, 2.781, 1.586, 2.586) ..cubicTo(1.781, 2.391, 2.007, 2.242, 2.264, 2.14) ..cubicTo(2.5, 2.047, 2.746, 2, 3, 2) ..lineTo(13, 2) ..cubicTo(13.254, 2, 13.5, 2.047, 13.736, 2.14) ..cubicTo(13.993, 2.242, 14.219, 2.391, 14.414, 2.586) ..cubicTo(14.609, 2.781, 14.758, 3.007, 14.86, 3.264) ..cubicTo(14.953, 3.5, 15, 3.746, 15, 4) ..lineTo(15, 5) ..cubicTo(15, 5.276, 14.902, 5.512, 14.707, 5.707) ..close() ..moveTo(2.5, 5.131) ..cubicTo(2.584, 5.047, 2.699, 5, 2.818, 5) ..lineTo(13.182, 5) ..cubicTo(13.301, 5, 13.416, 5.047, 13.5, 5.131) ..cubicTo(13.649, 5.044, 13.815, 5, 14, 5) ..lineTo(14, 4) ..cubicTo(14, 3.724, 13.902, 3.488, 13.707, 3.293) ..cubicTo(13.512, 3.098, 13.276, 3, 13, 3) ..lineTo(3, 3) ..cubicTo(2.724, 3, 2.488, 3.098, 2.293, 3.293) ..cubicTo(2.098, 3.488, 2, 3.724, 2, 4) ..lineTo(2, 5) ..cubicTo(2.185, 5, 2.351, 5.044, 2.5, 5.131) ..close() ..moveTo(13, 13) ..lineTo(13, 6) ..lineTo(3, 6) ..lineTo(3, 13) ..lineTo(13, 13) ..close() ..moveTo(9.856, 8.144) ..cubicTo(9.952, 8.241, 10, 8.359, 10, 8.5) ..cubicTo(10, 8.641, 9.952, 8.759, 9.856, 8.856) ..cubicTo(9.759, 8.952, 9.641, 9, 9.5, 9) ..lineTo(6.5, 9) ..cubicTo(6.359, 9, 6.241, 8.952, 6.144, 8.856) ..cubicTo(6.048, 8.759, 6, 8.641, 6, 8.5) ..cubicTo(6, 8.359, 6.048, 8.241, 6.144, 8.144) ..cubicTo(6.241, 8.048, 6.359, 8, 6.5, 8) ..lineTo(9.5, 8) ..cubicTo(9.641, 8, 9.759, 8.048, 9.856, 8.144) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ArchiveIconPainter old) => old.color != color; } ```