Document Stack
Document Stack
Docs

Icon Elements

Add vector icons to your templates from a library of 1000+ icons with custom colors and sizes.

Adding an Icon Element

Icon elements let you add crisp, scalable vector icons to your PDF templates. Icons are perfect for labels, section markers, contact details, and decorative elements.

  1. Click Icon in the toolbar
  2. Browse or search the icon library
  3. Click an icon to add it to the canvas

Icon Library

Document Stack includes the Lucide icon set — over 1,000 consistent, clean vector icons covering common categories:

  • Communication — phone, email, message, mail, globe
  • Business — briefcase, chart, building, calendar, document
  • Navigation — arrow, chevron, check, x, menu
  • Social — share, heart, star, bookmark, thumbs-up
  • UI — settings, search, edit, trash, plus, minus
  • Objects — camera, clock, lock, key, bell, flag

Searching Icons

Use the search bar at the top of the icon browser to quickly find what you need. Try terms like "phone", "check", or "arrow".

Styling Icons

Customize icons using the inspector panel:

Size

Set the icon width and height in pixels. Icons scale perfectly at any size because they're vector-based. Common sizes:

  • 16–20px — Inline with text (e.g., phone icon next to a number)
  • 24–32px — Section markers, list bullets
  • 48–64px — Feature highlights, decorative elements

Color

Change the icon color using the color picker in the inspector. Icons use a single fill color, so they integrate cleanly with any color scheme.

  • Match icon color to nearby text for a cohesive look
  • Use your brand's accent color for visual emphasis
  • Use muted gray for subtle decorative icons

Stroke Width

Adjust the line thickness of the icon. Thinner strokes look elegant and modern; thicker strokes create bolder, more prominent icons.

Common Use Cases

  • Contact details — Phone icon next to phone number, email icon next to email address
  • Section headers — Icon before a section title (e.g., calendar icon before "Due Date")
  • Status indicators — Check circle for completed, x circle for failed
  • List enhancement — Replace bullet points with relevant icons
  • Footer decoration — Social media icons, location pins

Positioning Icons

Position icons precisely using drag-and-drop or exact X/Y coordinates in the inspector. When placing icons inline with text:

  • Align the icon vertically with the text baseline
  • Leave 4–8px of space between the icon and adjacent text
  • Use the same height as the text font size for inline icons
Icons render as sharp vector graphics in the PDF at any zoom level. They won't pixelate like raster images.

Next Steps

Previous

Field Elements

Next

Line & Shape Elements