Intro to assets

The Assets panel is your central hub for managing all design resources and files in your WeWeb project. It provides access to reusable components, templates, icons, fonts, images, files, and marketplace resources.

Accessing the Assets panel

To access the Assets panel:

1. Click on the Assets tab in the Interface section (the icon with overlapping squares in the left sidebar)
2. You'll see six main sections: Library, Icons, Fonts, Images, Files, and Marketplace

Library

The Library contains all your reusable design assets including:

• Components — Reusable UI blocks where updates to the component are reflected in all instances
• Templates — Section and element templates that create copies when used
• Classes — CSS class styles that can be applied across elements
• Typographies — Text styles that ensure consistent font styling
• Colors — Color palettes for consistent branding
• Spacings — Standardized spacing values for layout consistency

Libraries can be shared across your workspace and reused in different projects, making them essential for building and maintaining a design system.

Learn more about working with libraries in WeWeb.

Icons

The Icons section allows you to manage icon sets for your project. WeWeb provides access to popular icon libraries and lets you upload custom icons.

Adding icon sets

To add icons to your project:

1. Click on the Assets tab in the Interface section
2. Select Icons
3. Browse available icon sets or search for specific icons
4. Add icon sets to your project

Once added, icons can be used throughout your project in any element that supports icon display.

TIP

WeWeb supports popular icon libraries like Font Awesome, Material Icons, and more. You can also upload your own custom SVG icons.

Learn more about using the icon element.

Fonts

The Fonts section manages typography resources for your project. You can add Google Fonts or upload custom font files.

Adding fonts

To add fonts to your project:

1. Click on the Assets tab in the Interface section
2. Select Fonts
3. Click Add font
4. Choose between:
   • Google Fonts — Browse and select from thousands of free Google Fonts
   • Upload font — Upload your own custom font files (TTF, OTF, WOFF, etc.)

Setting a default font

You can set one font as the default for your entire project. This font will be applied to all text elements unless a different font is specifically chosen.

TIP

When building libraries to share with others, use default fonts rather than specific custom fonts. This ensures the library works correctly even if the custom font isn't installed in other projects.

Images

The Images section is where you upload and manage all images used in your project. WeWeb automatically optimizes and serves images through a CDN for better performance.

Uploading images

To add images to your project:

1. Click on the Assets tab in the Interface section
2. Select Images
3. Click Upload new image
4. Select one or multiple images from your computer

Managing images

For each image, you can:

• Add tags — Organize images with searchable tags
• Set alt text — Add default alt text for accessibility and SEO
• Copy URL — Get the CDN URL to use the image elsewhere
• Edit/crop — Crop or adjust images directly in WeWeb
• Delete — Remove images from your project

TIP

All images are automatically uploaded to WeWeb's CDN and optimized for web delivery. You can copy the CDN URL to use images in custom code or external services.

Image best practices

• Add descriptive alt text to all images for accessibility
• Use tags to organize large image libraries
• Compress images before uploading for faster page loads
• Use appropriate image formats (JPEG for photos, PNG for graphics with transparency, SVG for logos)

Files

The Files section manages documents, PDFs, videos, and other file types used in your project.

Uploading files

To add files to your project:

1. Click on the Assets tab in the Interface section
2. Select Files
3. Click Upload or drag and drop files
4. Select files from your computer

Using files

Once uploaded, files can be:

• Downloaded by users through download links
• Referenced in workflows and formulas
• Used for file upload/download features
• Embedded in your pages (PDFs, videos, etc.)

TIP

Files are also served through WeWeb's CDN. You can set custom paths for files, which is useful for creating custom sitemaps or other special files that need specific URLs.

Learn more about creating custom sitemaps.

Marketplace

The Marketplace provides access to professionally designed templates and UI kits created by the WeWeb community and team.

Using marketplace resources

To use a marketplace template or library:

1. Click on the Assets tab in the Interface section
2. Select Marketplace
3. Browse or search for templates and UI kits
4. Preview available resources
5. Import the ones you want to use

You can also access the marketplace directly at marketplace.weweb.io.

Submitting to the marketplace

If you've created templates or libraries you want to share with the WeWeb community, you can submit them to the marketplace. Submissions can be free or paid.

Learn more about working with the WeWeb marketplace.

Frequently Asked Questions

How do I share my library with other projects in my workspace?

Libraries are project-specific by default, but you can share them across your workspace:

1. Open the Assets tab and select Library
2. Click the Share button in the top right
3. Choose to share with your workspace

Once shared, other projects in your workspace can add your library to reuse components, templates, and styles.

Learn more about sharing libraries.

What's the difference between templates and components?

Templates create copies — when you drag a template onto a page, it creates an independent copy. Changes to the original template don't affect existing copies.

Components create instances — when you add a component to a page, it creates an instance. Changes to the component are automatically reflected in all instances across your project.

Use templates for starting points that will be customized. Use components for consistent UI elements that should update everywhere when changed.

Can I use custom fonts in my project?

Yes! You can upload custom font files (TTF, OTF, WOFF, etc.) through the Fonts section. Click Add font and choose Upload font to add your custom typography.

Make sure you have the proper license to use the font in a web application.

Are there file size limits for uploads?

WeWeb has reasonable file size limits to ensure good performance:

• Images — Recommended to keep under 5MB per image
• Files — General files should be under 100MB
• Fonts — Font files are typically under 1MB

For best performance, compress images and optimize files before uploading.