Enhancement: Customize Logo

[mmw1984]

What features would you like to see added?

Users can edit logo.svg to change the logo in the login page

More details

in .env ?

Which components are impacted by your request?

UI

Pictures

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[zubu007]

Is there any update regarding this feature? If not can you tell me where I can find the current logo?

[imran786110]

You need to deploy your own docker image instead of predefined docker image in docker-compose.yml file.

e.g.
If you are done with your changes, e.g. logo changes or text changes, then run this command to create your own image.
docker build -t my-image .

It will take some time to complete.

Then simply edit your docker-compose.yml file at line 12 where image is given:
image: my-image

When its complete simple run:
docker-compose up -d

It will now run from your local image.

[danny-avila]

This is not planned, at this point, you are forking the project and it's relatively simple to do this step.

[fuegovic]

@zubu007 you need to build the docker image, the compose file link to a precompiled image, With the override file you can change that behavior

[joseph-holland]

If you are just using the deploy-compose.yml make sure you are also specifying the override file too as per: https://www.librechat.ai/docs/configuration/docker_override#deploy-composeyml
docker compose -f deploy-compose.yml -f docker-compose.override.yml up

I missed this too and was scratching my head for a bit.

[harrisonhxy]

Can you please tell me how to change the icon in the login page?

[surak]

Can you please tell me how to change the icon in the login page?

You change the client/public/assets/logo.svg and follow the message from @joseph-holland

[flying-wizzy]

EDIT:
now that I think of it, you probably won't have to rebuild the whole app and use the librechat-dev image if you want to change the logos ONLY. The browser is loading them from client/dist/assets, so swapping them in that folder via volumes, e.g.
- ./assets/logo.svg:/app/client/dist/assets/logo.svg should suffice.

If you want to change other parts of the ui, like colors or react components, you need to rebuild the app with the steps I described below.

Original Comment

If you don't want to build your own image, but just have your own logos inside the LibreChat ui, just do the following:

Copy the client/public/assets folder and change any icon according to your needs, do not rename them though. Then, link your changed assets folder to the LibreChat container under volumes: in the docker-compose.yml for example like so:

- ./assets:/app/client/public/assets

Just running docker compose up alone now won't do the trick, because the librechat image is using a pre-compiled build of the react app. Therefore, you need to rebuild the react app via npm first. Afaik, this is only possible with the librechat-dev image, because it comes with npm etc.

So, under the LibreChat container, add the following command to your docker-compose:
command: sh -c "npm ci && npm run frontend && exec npm run backend"

This will install all required packages, build the frontend and finally run the backend. Depending on your server this build will take maybe around 2 minutes. Afterwards, your customized ui should be ready to go! Bear in mind, that your browser might still display different assets at first, because it has cached the website ui. Switch to an incognito or clear the cache to see the updated ui. Cheers!