Brand Logo

Let's start by customizing the brand logo, There are two ways we can change the default brand name or logo.

1. By method ( ⚠️ filament v3.0.53+)

    use Filament\Panel;
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->brandLogo(asset('logo.svg'));
    }
   

2. By view

   Create a new file under resources/views/vendor/filament-panels/components/logo.blade.php and customize it according to your needs, Filament will detect and use this file.

Favicon

Filament provides a method to quickly add the favicon to the admin panel.

use Filament\Panel;
public function panel(Panel $panel): Panel
{
    return $panel
        ->favicon(asset('favicon.png'));
}

Brand Color

There are different ways we can pass colors in filament but the simplest way is to just pass a hex or RGB value and Filament will automatically generate color palettes for you.

use Filament\Panel;
public function panel(Panel $panel): Panel
{
    return $panel
        ->colors([
                'primary' => '#6366f1',
            ]);
}

Page title

In Filament, the page title is a combination of the current page you are on and the value of config('app.name') or brandName(). e.g. Dashboard - Laravel.

1. Brand name change either APP_NAME in .env or in the filament service provider

    APP_NAME=Lara
   
    // OR
   
    use Filament\Panel;
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->brandName("Lara");
    }
   

2. Current page title

    // app/Filament/Resources/SomeResource/Pages/ListSome.php
    protected static ?string $title = 'Custom title';
   

The above code will show the page title i.e. Custom title - Lara.

Navigation icon

Filament uses blade icons for the icon library with heroicons set.

// app/Filament/Resources/CustomerResource.php
class SomeResource extends Resource {
    protected static ?string $navigationIcon = 'heroicon-o-document-text';
    // ...
}

But if you want to use a custom SVG icon then you have to configure it a little bit.

php artisan vendor:publish --tag=blade-icons

First, we publish the blade icons config, then uncomment the array with default key and set the path where we stored the SVG file. The prefix key does the same as the name suggests.

// config/blade-icons.php
<?php
return [
    'sets' => [
        'default' => [
            'path' => 'resources/svg',
            'prefix' => 'icon',
            // ...
        ],
    ],
    // ...
];

Let's say we have a file resources/svg/custom.svg, then we can use it as icon-custom.

protected static ?string $navigationIcon = 'icon-custom';

That's it, I hope you are all safe.