Webiny Docs home page
Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.40.x.
Can I Use This?

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

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

Overview
anchor

Changing the default logo is a very quick and straightforward process. The @webiny/app-serverless-cms packages exposes an AddLogo plugin specifically for this purpose.

Your logo will be visible in two locations: in the top app bar, and in the navigation drawer.

Replace the Logo

To replace the logo, go to apps/admin/code/src/App.tsx in your Webiny project, and apply the following code changes:

apps/admin/code/src/App.tsx

You can specify any React element as a value of the logo prop. The system will simply make sure that it is rendered in the correct place. It is your responsibility to style your element accordingly (apply width, padding, color, etc.).

Conditional Styling
anchor

Since there are two locations where your logo will be rendered, there’s a neat way to tell where exactly your component is currently being rendered. For this, you’ll have to create a React component which will render your logo.

Notice the use of the useTags hook. It’s a utility which can come in really handy when you want to tag sections of your React app, so you components can render differently depending on their location in the component hierarchy. This topic will be covered in more details in a dedicated article.

With this, your logo will have different styles applied to it, depending on where it’s being rendered.