Saved time

Refining titles in Refine (a React framework for building internal tools) involves customizing the app name and icon displayed in the sidebar, header, or authentication pages.

Here are the main ways to refine titles in Refine as of 2026: 1. Global Title Customization (App.tsx)

You can customize the global title, which changes the text and icon used in the by passing options to the component.

// App.tsx import { CustomIcon } from “./components/CustomIcon”; const App = () => ( , // Custom icon text: “My Custom App”, // Custom title text }, }} /> ); Use code with caution. 2. Customizing Title in Sidebar

To specifically change the title in the sidebar (or top-left corner), you can use the Title prop within .

( } text=“My Project” /> )} > {/… */} Use code with caution. 3. Dynamic Page Titles ()

To change the actual text shown on the browser tab based on the current page, use the DocumentTitleHandler in your App.tsx.