# Adding your Logo {% hint style="info" %} NOTE: You can very well change the logo using only CSS without having to ejecting the template. There's a demo in [this video](https://youtu.be/Nkoz1iD-HOA?si=6DLF7iAPTeX-pkNP). {% endhint %} Let's say you want to put the logo of your company on every pages of the theme. First you'd eject the Template: ```bash npx keycloakify eject-page # Select login -> Template.tsx ```

This will create a **src/login/Template.tsx** file in your project. Let's use this placeholder for the demo: [logo.png](https://github.com/keycloakify/keycloakify/releases/download/v0.0.1/logo.png) and save it in **src/login/assets/logo.png**. Now we can use the asset in our component: {% tabs %} {% tab title="React" %}

import logoPngUrl from "./assets/logo.png";
// ...
<div className={kcClsx("kcLoginClass")}>
    <div id="kc-header" className={kcClsx("kcHeaderClass")}>
        <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
            {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/}
            <img src={logoPngUrl} width={500}/>
        </div>
    </div>
    {/* ... */}

{% endtab %} {% tab title="Svelte" %} {% code title="src/login/Template.svelte" %} ```html ``` {% endcode %} {% endtab %} {% tab title="Angular" %}

import logoPngUrl from '../assets/logo.png';

export class TemplateComponent extends ComponentReference {
  logoPngUrl = logoPngUrl;
  // ...

<img
  [src]="logoPngUrl"
  alt="logo"
  width="500"
/>

{% endtab %} {% endtabs %} Result:

## Optional: Updating the logo without re-building the theme Some pepoles want to be able to "hot swipe" the asset in the Keycloak file system without having to re-build the theme and re-deploy it. To ensure that the assets are located in a predictible location you would use the public/ directory. Move the file to **public/img/logo.png**. Then make an absolute import from your component: {% tabs %} {% tab title="React - Vite" %} It's important that you do not simply harcode `src="/img/logo.png"`, or keycloakify won't be able to patch the URL for Keycloak. Use Vite's builtin `import.meta.env.BASE_URL`.

<div className={kcClsx("kcLoginClass")}>
    <div id="kc-header" className={kcClsx("kcHeaderClass")}>
        <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
            {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/}
            <img src={`${import.meta.env.BASE_URL}img/logo.png`} width={500}/>
        </div>
    </div>
    {/* ... */}

Doing this is a good practice in any Vite project (not specially Keycloakify) since it ensure the correctness of your URLs even if you customize the `base` parameter in the your **vite.config.ts**. Hard coding `"/img/logo.png"` only works when base is `"/"` (which is the default) {% endtab %} {% tab title="Svelte" %} It's important that you do not simply harcode `src="/img/logo.png"`, or keycloakify won't be able to patch the URL for Keycloak. Use Vite's builtin `import.meta.env.BASE_URL`. {% code title="src/login/Template.svelte" %} ```html ``` {% endcode %} Doing this is a good practice in any Vite project (not specially Keycloakify) since it ensure the correctness of your URLs even if you customize the "base" parameter in the your vite.config.ts. Writing "/img/logo.png" only works when base is "/" (which is the default) {% endtab %} {% tab title="Angular - Vite" %}

export class TemplateComponent extends ComponentReference {
  BASE_URL = import.meta.env.BASE_URL;

{% code title="src/login/template/template.component.html" %} ```html logo

``` {% endcode %} {% endtab %} {% tab title="React - Webpack/CRA" %} It's important that you do not simply harcode `src="/img/logo.png"`, or keycloakify won't be able to patch the URL for Keycloak. Use `PUBLIC_URL` instead.

import { PUBLIC_URL } from "keycloakify/PUBLIC_URL";

<div className={kcClsx("kcLoginClass")}>
    <div id="kc-header" className={kcClsx("kcHeaderClass")}>
        <div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
            {/*{msg("loginTitleHtml", realm.displayNameHtml)}*/}
            <img src={`${PUBLIC_URL}/img/logo.png`} width={500}/>
        </div>
    </div>
    {/* ... */}

NOTE: You can see PUBLIC\_URL as an equivalent of `process.env.PUBLIC_URL` that will work inside and outside of Keycloak. {% endtab %} {% endtabs %} If you ever need to SSH into the Keycloak server and hot swipe the image you can find it at **/opt/keycloak/themes/**[**\**](https://docs.keycloakify.dev/features/compiler-options/themename)**/login/resources/dist/img/logo.png**