Skip to main content

Change Logo

Can I Use This?

In order to follow this guide, you must use Webiny version 5.12.0 or greater.

What you'll learn
  • how to replace the default Webiny logo with your own React component
Prerequisites

To use the instructions presented in this guide, you need to know how to register Webiny plugins in your React applications. Please visit the Importing Plugins guide, if you're not already familiar with the process.

Overview#

Changing the default logo is a very quick and straightforward process. The main Admin Area layout is built using the UI Composer. This means that you can hook into any part of the view and modify it.

The two views that you'll need to hook into are the AdminView and NavigationView.

Replace the Logo in the Header#

To replace the logo in the main header, we need to hook into the AdminView class and access the header element, which contains a setLogo setter.

// Hook into the AdminView view
new UIViewPlugin<AdminView>(AdminView, view => {
view.getHeaderElement().setLogo(<MyLogo />);
});

Note that <MyLogo /> has to be a React element. This allows you to have your logo be as simple or as complex as necessary.

Replace the Logo in the Navigation Drawer#

There is a second logo, in the navigation drawer, which looks different from the one in the AdminView header. The view class responsible for the navigation drawer is the NavigationView class.

new UIViewPlugin<NavigationView>(NavigationView, view => {
view.getHeaderElement().setLogo(<Logo onClick={() => view.getNavigationHook().hideMenu()} />);
});

Here we also want to close the drawer when the logo is clicked, so we use the built-in view hook to access state management operations, and invoke hideMenu on logo click.

Learn more

To learn more about how UI Composer views work, and how hooks are added into the mix, see the Building Views article.

Last updated on by Pavel Denisjuk