Back to all lessons
Lesson library

Assets panel

Upload and manage all your website’s assets in the Webflow Designer.

This video features an old UI. Updated version coming soon!

The Assets panel — also called the Asset Panel — allows you to upload and manage all your website’s assets. The Assets panel lives in the left panel of the Designer. This allows you to drag and drop your assets directly in your project.

Webflow Asset Manager
In this lesson:
  1. Adding assets
  2. Naming assets
  3. Using assets
  4. Deleting assets
  5. Filtering and sorting assets

Adding assets

There are two main ways to add images or files to your project:

  • Using the upload button in the Assets panel
  • Dragging and dropping assets into your project

In the Assets panel

You can click the upload button located in the upper right corner of the Assets panel. From here, you can make your selection of one or multiple files you want uploaded.


Dragging and dropping

You can drag a single image or file right onto the canvas and it will automatically add an Image Element or a link to the file. You can also open the Assets panel, then drag the asset directly into it for later use.


This method also works for adding multiple assets. You can select a group of assets and drag them into your project, adding all of them into the Assets panel at once. You do not need the Assets panel open when adding multiple assets like this.

Supported files

The Assets panel supports most image file types, the document types listed below, and Lottie JSON animation files.

Supported image file extensions:

  • PNG
  • JPEG and JPG
  • GIF
  • SVG

Supported document file types:

  • PDF
  • DOC and DOCX
  • XLS and XLSX
  • PPT and PPTX
  • TXT
  • CSV
  • ODT
  • ODS
  • ODP

Supported Lottie file types:

  • JSON (only Lottie type)
Note: The maximum file size is 4MB for images and 10MB for documents. 
Important: Only upload files you have the right to use and distribute.

Naming assets

To avoid an upload error, keep the following in mind when naming assets:

  1. Use letters, numbers, hyphens, and underscores, (characters that can be used in URLs to link to assets)
  2. Avoid special characters in the filename (e.g., `#, (), ' ,`)
  3. Use short file names (100 characters or less, including the file extension)
Note: Keep your images below 4MB — resize, optimize, and/or compress large file sizes to help with faster load times.

Using assets

Once the files are in the Assets panel, you can drag them into the project. Dropped images will appear as Image elements and dropped files will appear as text links.

You can also add file attachments to any link element from the link settings. You can attach any type of asset to a link. When you click on any of these links, image and document files will open in the same tab but other file types will be downloaded to your computer. If you want images and documents to open in a new tab, make sure to check the open in a new tab checkbox.

Webflow file attachment settings

You can also use uploaded images as background images.

Searching for your assets

You can search and quickly find any asset in your project using the search bar in the Assets panel or using Quick find (CMD+E / CTRL+E). To use Quick find, make sure to enable asset search from the quick find settings.

Deleting assets

Deleting an instance of an asset on the canvas will not delete the asset in the Assets panel. To delete the asset from the Assets panel:

  1. Open the Assets panel
  2. Hover over the asset you want to delete
  3. Click the settings icon that appears on the top right of the asset
  4. Delete the asset

Keep in mind that if you’ve deleted an asset from the Assets panel while it’s still being used somewhere in your project, that asset will show up in the Assets panel again once you publish the site and refresh the Designer. All instances of the asset must be deleted from the project, then from the Assets panel to remove it completely.

Pro tip: You can also use quick find to locate the asset and access its settings. Once you've found the asset, hover over it in the quick find results and clicking the settings icon.
Good to know: The asset details popup not only allows you to delete an asset, it also also allows you to access the direct link of the asset and see details like the size and dimensions of your asset.

Filtering and sorting assets

You can select from a number of filtering and sorting options within the Assets panel.

Filtering assets

Choose what type of assets to display using the filter dropdown in top left of the Assets panel. You can filter by All Assets, Images, or Documents. By default all asset types are displayed.

Webflow Asset Manager Filter

Sorting assets

Sort your assets by Newest First, Oldest First, or Alphabetical (A-Z or Z-A) in the bottom left corner of the Assets panel. By default, your assets will be sorted newest to oldest.

Webflow Asset Manager Sorting

View options

Lastly, in the bottom right corner of the Assets panel you can select how your Assets are displayed. You can choose between grid, list, or small list. By default, assets are sorted using the grid view.

Webflow Asset Manager Views
Try Webflow — it's free