How to create reusable symbols on Webflow

intermediate 8 min read Updated 2026-03-18

Quick Answer

Create reusable symbols in Webflow by selecting elements, right-clicking and choosing 'Create Symbol', then naming your symbol. These symbols can be used across pages and automatically sync changes throughout your site.

Try Webflow Full Webflow Review

Prerequisites

Basic Webflow knowledge
Understanding of HTML structure
Familiarity with the Webflow Designer
Knowledge of CSS classes

Step-by-Step Instructions

Select the elements you want to convert

In the Webflow Designer, select the element or group of elements you want to turn into a reusable symbol. You can select multiple elements by holding Ctrl (Windows) or Cmd (Mac) while clicking. Make sure all elements are properly styled and structured before creating the symbol.

Group related elements in a div block first to make symbol creation easier and more organized.

Create the symbol

Right-click on your selected element(s) and choose Create Symbol from the context menu. Alternatively, you can use the keyboard shortcut Ctrl+Shift+A (Windows) or Cmd+Shift+A (Mac). A dialog box will appear asking you to name your symbol.

Use descriptive names for your symbols to easily identify them later, such as 'Navigation Bar' or 'Product Card'.

Name and configure your symbol

In the Create Symbol dialog, enter a clear, descriptive name for your symbol. Click Create Symbol to confirm. Your selected elements will now be converted into a symbol instance, indicated by a green outline and symbol icon in the Navigator panel.

Edit the symbol master

To edit your symbol, double-click on any symbol instance or click the Edit Symbol button in the Element Settings panel. This opens the symbol in edit mode, where you can modify the master version. Any changes made here will automatically update all instances of this symbol across your site.

The purple canvas background indicates you're editing a symbol master.

Add the symbol to other pages

Navigate to the Symbols panel in the Add panel (plus icon). Drag your created symbol from the list onto any page where you want to use it. The symbol will maintain its styling and functionality across all instances.

You can also copy and paste symbol instances between pages using Ctrl+C and Ctrl+V.

Override specific properties

Select a symbol instance and use the Element Settings panel to override specific properties like text content, images, or links without affecting the master symbol. Green text in the settings panel indicates overridden values that are unique to that instance.

Not all properties can be overridden - structural changes must be made to the symbol master.

Manage your symbols

Access the Symbols Manager through the Pages panel to rename, delete, or organize your symbols. You can also see which pages use each symbol and convert symbols back to regular elements if needed using the Unlink Symbol option.

Regularly clean up unused symbols to keep your project organized and improve loading times.

Common Issues & Troubleshooting

Symbol not updating across all instances

Ensure you're editing the symbol master (purple background) not an individual instance. Check if the property you're trying to change has been overridden in specific instances.

Cannot edit certain properties of symbol instance

Some properties can only be modified in the symbol master. Double-click the symbol to enter edit mode, make your changes, then click Done to apply changes to all instances.

Symbol appears broken or missing elements

Check if all elements were properly selected before creating the symbol. Use Unlink Symbol to convert back to regular elements, fix the structure, then recreate the symbol.

Accidentally deleted or modified symbol

Use Ctrl+Z to undo recent changes. For major issues, check your Site Backup in the Project Settings to restore a previous version of your site.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Webflow website before purchasing.

Visit Webflow View Webflow Pricing