Assets

The Assets panel in SquareLine Vision is the central repository for all external resources used in the project, including fonts, images and vector graphics. The Assets panel is located in the left sidebar of the interface.

File type restrictions

SquareLine Vision only supports the following file types for assets:

• PNG files for images
• SVG files for vector graphics
• TTF and OTF files for fonts

Main area

The main area displays all assets added to the project. The default assets include:

• Montserrat-Regular font
• Montserrat-Bold font

These fonts provide a starting point for designs without requiring additional font installations.

Panel header

The icons in the top-right corner of the panel provide the following functions:

• Search (magnifying glass) - Filters the assets by name
• Download - Downloads all assets of the project in a single zip file
• Three dots (...) - Opens the panel menu with the New folder, Upload and Vector icon options

Searching assets

1. Click the magnifying glass icon in the top-right corner
2. Enter keywords to filter through the assets
3. The panel will display only matching results, including the assets located in folders

Adding assets

There are two methods to add assets to a project:

Method 1: Using the upload option

1. Click the three dots (...) in the top-right corner of the Assets panel and select Upload, or click the "Upload file" button in the empty panel
2. Navigate to the file location on the local computer
3. Select one or more files and click "Open"
4. The assets will appear in the Assets panel, in the currently open folder

Method 2: Drag and drop

1. Locate the files to be added on the local computer.
2. Select one or multiple files
3. Drag the selected files directly into the Assets panel
4. Release to add all selected files simultaneously

If an added image has the same name as an existing asset, a dialog asks whether to Replace the existing asset or to Keep both by saving the new file under a different name.

Organizing assets in folders

Assets can be organized into folders, and folders can be nested inside each other.

Creating a folder

1. Click the three dots (...) in the top-right corner of the Assets panel
2. Select New folder
3. The folder is created in the currently open folder with the name "New folder", and its name can be typed immediately

Navigating folders

• Double-click a folder to open it
• The breadcrumb bar above the assets shows the current location (e.g. All assets < Icons < Small). Click any entry to jump to it, or use the arrow at the beginning of the bar to step back one level
• When the path is long, the first levels are collapsed into a three dots (...) menu

Moving assets and folders

• Drag an asset or a folder onto another folder to move it there
• Alternatively, open the three dots (...) menu of the asset or folder and use Move to, which lists All assets (the root of the panel) and the available folders

Folder menu

Hovering over a folder reveals its three dots (...) menu with the following options:

• Download - Downloads the content of the folder, including its subfolders, as a zip file
• Rename - Renames the folder. The name can also be edited by clicking on it
• Move to - Moves the folder into another folder or back to All assets
• Delete - Deletes the folder. A folder cannot be deleted while it contains assets that are used in the project

Inserting vector icons

Instead of drawing icons by hand, ready-made vector icons can be inserted from the built-in icon library:

1. Click the three dots (...) in the top-right corner of the Assets panel and select Vector icon
2. Select the icon library in the first dropdown (currently the Lucide icon set is available). When a library offers several stroke weights, the second dropdown selects the Weight
3. Type in the Search icons field to filter the icons by name
4. Click an icon in the grid to select it, then click Insert
5. The icon is added to the current folder as an SVG asset named after the icon (e.g. heart.svg)

The inserted icon behaves like any other SVG asset: it can be displayed with the SVG widget, renamed, moved into folders, replaced or deleted.

Image sequences

Several PNG images can form an image sequence, which the Image widget can display and the Animation panel can play frame by frame. Sequences are detected automatically based on the file names:

• The images must be in the same folder and have the same name ending with a number, e.g. loader_00.png, loader_01.png, loader_02.png
• At least two matching images are needed
• The sequence appears in the image selectors as loader[00-02].png, where the numbers are the first and the last frame
• Gaps in the numbering are allowed; a missing frame number resolves to the closest lower frame

---

ⓘ INFO Moving a member image to another folder removes it from the sequence, and a sequence that is used by a widget cannot be deleted.

---

Managing assets

Clicking the three dots at the top of an asset opens the asset management tab.

There are six options inside:

• Download: Downloads the selected asset.

• Replace: Replaces the selected image asset. If an asset is dragged and dropped with the same file name as an existing asset, a prompt will appear asking whether to replace it or save it under a different name.

• Rename: Renames the selected image asset.

• References: Shows where the asset is used in the project (see below).

• Move to: Moves the selected asset to the desired folder inside the asset manager.

• Delete: Deletes the selected asset. An asset that is still in use cannot be deleted.

Viewing asset references

Clicking an asset in the Assets panel opens a reference window showing exactly where that resource is used across your project.

• Asset Name: Displays the selected file being tracked (e.g., battery_bg.png).

• Locations: Lists the specific screens, components, and widget properties utilizing the asset (e.g., main screen under Mask – Image source).

This overview allows you to verify dependencies before renaming, replacing, or deleting your files.

Downloading all assets

All assets of the project can be downloaded at once:

1. Click the download icon in the top-right corner of the Assets panel
2. A zip file named after the project is prepared and downloaded

The zip file keeps the folder structure of the Assets panel. The built-in default fonts are not included. To download a single folder, use the Download option in the three dots (...) menu of the folder; the zip file is then named after the folder.

Asset usage information

At the bottom of the Assets panel, there is a collapsible "Asset usage" section that displays resource utilization:

• Size max: "Number" MB: The maximum total file size allowed for all assets
  • The progress bar and percentage show how much of this allowance you're currently using
• Count max: "Number": The maximum number of individual assets allowed
  • The percentage indicates how many of your available asset slots are being used