Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/howtodo1/printer-web/llms.txt

Use this file to discover all available pages before exploring further.

Icon objects let you place vector artwork on the canvas without drawing from scratch. PenPrint ships with a built-in library of named icons, and you can supplement it by uploading your own SVG files. Every icon is stored as a scalable Fabric.js group, so you can resize and rotate it freely without loss of quality.

​
Adding an icon object

Click the image button in the editor toolbar to add a new icon object. PenPrint inserts a default SVG — a circle with a D-shape cutout — at position (40, 5) with a scale of 0.1 on both axes. The Object Properties panel opens automatically so you can immediately swap the default for any icon from the library.
1

Click the image button

A new icon object appears on the canvas at the default position and scale.
2

Browse or search for an icon

Use the Object Properties panel to find the icon you want. You can scroll the icon strip or use the search input to filter by name or tag.
3

Click an icon to apply it

PenPrint fetches the selected icon’s SVG, loads it onto the canvas, and replaces the current object — preserving its position, size, and rotation angle.

​
Browsing the icon library

The Object Properties panel for an icon object contains a scrollable icon strip that shows all available icons from the built-in ricons collection. Each icon is identified by a name key (for example, "menu-button" or "search") and served from /icons/{key}.svg. Use the left (←) and right (→) scroll buttons on either side of the strip to page through the available icons. The panel displays a count reading the number of icons found that updates as you filter the library.

​
Searching for icons

Type in the search input and click Search to filter the icon strip.
The search checks whether your query is a substring of the icon’s name key. Matching is case-insensitive. For example, typing menu returns "menu-button" and any other icon whose name contains that string.
Icons can also carry metadata tags. If your query matches any tag associated with an icon (case-insensitive substring match), that icon appears in the results even if the name does not match.
Start with a broad search term and narrow it down. The icons found counter updates immediately so you can see at a glance how many results each query returns.

​
Uploading a custom SVG

If the built-in library does not have what you need, you can supply your own vector artwork.
1

Click Upload SVG

In the Object Properties panel, click the Upload SVG button. A file picker opens filtered to .svg files only.
2

Select your SVG file

Choose any valid .svg file from your computer. PenPrint reads the file and passes its markup to the Fabric.js SVG loader.
3

Review the result

The loaded SVG replaces the current icon object on the canvas, preserving the existing position, scale, and rotation. Inspect the result and adjust the transform handles if needed.
PenPrint loads SVG files as-is. Very complex SVGs with embedded raster images, filters, or scripts may not render correctly in Fabric.js. For best results, use clean vector SVGs with simple paths and no external dependencies.

​
How icon swapping works

When you select a different icon from the strip or upload a new SVG, PenPrint runs updateIcon():
  1. Fetches the SVG source from /icons/{key}.svg (or reads your uploaded file).
  2. Calls Fabric.js loadSVGFromString to parse the markup.
  3. Groups the resulting elements with groupSVGElements.
  4. Replaces the current canvas object with the new group while copying over the original object’s left, top, scaleX, scaleY, and angle properties.
This means you can freely swap icons without losing the position and size you have already dialled in.
The initial default icon is placed at left=40, top=5, scaleX=0.1, scaleY=0.1. After your first swap, those values are carried forward from whatever transform you applied, not reset to the defaults.

​
Duplicating and deleting icon objects

With an icon object selected, the Object Properties panel offers two management actions:
  • Duplicate — clones the active icon object, offsets the copy 10 canvas units down and 10 units right, and adds it to the canvas. The clone retains the same SVG content, scale, and rotation.
  • Delete — removes the active icon object from the canvas. This action cannot be undone.

​
Related pages

Working with the canvas

Learn how to select, move, scale, and rotate objects on the canvas.

Adding and editing text

Create text objects and understand how glyphs render as stroke paths.

Preview, export, and share

Export your icon design as GCODE or send it for printing.

Build docs developers (and LLMs) love

Get started for freeTalk to us