Laravel 13 - Integrating Blade Heroicons for a Modern UI.
Laravel 13 - Integrating Blade Heroicons for a Modern UI.
In this tutorial, we will learn how to use Blade Heroicons in a Laravel 13 application to build a modern UI. We will install and configure the package and customize scalable icons using Tailwind CSS and inline styles.
Quick Overview
This guide walks you through integrating Blade Heroicons into a Laravel 13 application, allowing you to add clean, scalable, and customizable icons to your Blade views with minimal setup. We start by creating a fresh Laravel 13 project and installing the official Blade Heroicons package through Composer. After publishing the package configuration file, we verify the installation by displaying a Heroicon on the default welcome page. Finally, we explore different ways to customize icons using Tailwind CSS utility classes and inline CSS styles, giving you full control over their size, color, and appearance. By the end of this tutorial, you'll have everything needed to start using Heroicons throughout your Laravel applications to create a more polished and visually engaging user experience.
Step # 1 : Create a New Laravel 13 Application.
To get started, you'll need a Laravel 13 project. You can follow along with a fresh installation or apply the steps to an existing application. In this tutorial, we'll create a new project named heroicons. Before creating the project, make sure Composer is installed on your machine, as Laravel uses it to manage dependencies. For a smoother setup experience, it's also a good idea to install the Laravel Installer globally. If you haven't installed it yet, run the following command.
composer global require laravel/installer
Once the Installer is available, create a new Laravel 13 application by running.
laravel new heroicons
During the installation, Laravel will ask you to choose several configuration options. Use the following selections.
- Starter Kit: Select None to keep the project clean and lightweight.
- Testing Framework: Choose Pest for a simple and modern testing experience.
- Laravel Boost: Select No since it isn't needed for this tutorial.
- Database: Choose SQLite for a quick and lightweight database setup.
- Install and build frontend assets: Select Yes to automatically install and build the frontend assets.
After the installation finishes, Laravel will automatically configure SQLite and build the frontend assets for you. At this point, your Laravel 13 application is ready, allowing you to move directly into development without any additional project setup.
Step # 2 : Access Your Laravel Project Directory.
Before running any Laravel commands, open your preferred terminal such as Git Bash, Command Prompt, or Terminal, and navigate to your project’s root folder.
cd c:xampp/htdocs/heroicons
This ensures all Artisan commands run against the correct application and any changes are applied properly within your project.
Step # 3 : Install Blade Heroicons Package.
To use Heroicons in your Laravel project, you first need to install the official Blade Heroicons package. Run the following command in your terminal.
composer require blade-ui-kit/blade-heroicons
Composer will automatically download and install the package along with all required dependencies in the background. Once the installation is complete, the Heroicons components will be available in your Blade views without any additional configuration. You can now start using clean, scalable icons in your UI, helping you build a more modern and visually polished interface.
Step # 4 : Publish Blade Heroicons Configuration File.
Blade Heroicons allows you to customize how icons behave and appear, including default classes, attributes, and other rendering options. To access these settings, you first need to publish the package configuration file. Run the following command in your terminal.
php artisan vendor:publish --tag=blade-heroicons-config
This will generate a blade-heroicons.php file inside your project’s config directory. From there, you can open the file and adjust options such as default CSS classes and icon attributes. Once configured, these settings will apply across all Heroicons used in your Blade views, giving you full control over how icons are displayed throughout your application and allowing you to easily align them with your overall UI design and styling preferences.
Step # 5 : Update Welcome Blade to Display Heroicons.
Now let’s verify that Blade Heroicons is working correctly by displaying an icon on the default Laravel welcome page. We’ll update the welcome.blade.php file located in the resources/views directory and render a simple Heroicon inside a styled layout. This will help confirm that Blade Heroicons is properly installed and working as expected inside your Laravel 13 application. Replace the existing content with the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Laravel 13 Blade Heroicons Example</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
<div class="max-w-3xl mx-auto mt-2 p-4 bg-white rounded-2xl shadow-md border border-gray-200">
<h1 class="text-3xl font-bold text-center text-gray-900 mb-2">
Code Shortcut - Welcome to Blade Heroicons
</h1>
<p class="text-center text-gray-600 mb-2">
This page demonstrates how Heroicons work inside a Laravel 13 application using Blade components.
</p>
<!-- Heroicon Example -->
<div class="flex justify-center">
<x-heroicon-o-building-office />
</div>
<p class="text-center text-gray-600">
This is a simple test to display the building office icon from Blade Heroicons. You can now start integrating other icons as needed throughout your app!
</p>
</div>
</body>
</html>
This layout uses Tailwind CSS for a clean and minimal design, with a centered Heroicon example inside a styled container. The <x-heroicon-o-building-office /> component confirms that Blade Heroicons is properly installed and working in your Laravel 13 application.
Step # 6 : Test the Setup and Style the Icon.
Let’s bring it all together by testing Blade Heroicons in the browser. First, start the Laravel development server.
php artisan serve
Then visit: http://127.0.0.1:8000 in your browser. You should see the building office icon rendered on the page, confirming that the integration is successful.
Icons can be easily customized using Tailwind CSS utility classes directly on Blade Heroicons components. This gives you full control over the icon’s size, color, and overall appearance. Below is an example showing how to style a Heroicon in a Laravel 13 application.
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Laravel 13 Blade Heroicons Example</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
<div class="max-w-3xl mx-auto mt-2 p-4 bg-white rounded-2xl shadow-md border border-gray-200">
<h1 class="text-3xl font-bold text-center text-gray-900 mb-2">
Code Shortcut - Welcome to Blade Heroicons
</h1>
<p class="text-center text-gray-600 mb-2">
You are now ready to use scalable, customizable icons in your Laravel application.
</p>
<!-- Heroicon example with Tailwind classes -->
<div class="flex justify-center">
<x-heroicon-o-building-office class="w-16 h-16 text-blue-500" />
</div>
<p class="text-center text-gray-600 mb-2">
This icon uses Tailwind utility classes to adjust size and color.
</p>
</div>
</body>
</html>
In this example, the <x-heroicon-o-building-office /> component is styled using Tailwind classes such as w-16, h-16 and text-blue-500 to increase its size and change its color. This demonstrates how Blade Heroicons integrates seamlessly with Tailwind CSS, giving you full flexibility in customizing icons throughout your application. Replace the existing content with the code above and refresh your browser to see the changes.
Alternatively, you can style the Heroicon using Inline CSS instead of Tailwind utility classes. This approach gives you direct control over the icon’s appearance using standard CSS properties. The following example demonstrates how you can apply inline styling to a Heroicon within a Laravel 13 application. Update the file with the following code and refresh your browser to see it in action.
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Laravel 13 Blade Heroicons Example</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
<div class="max-w-3xl mx-auto mt-2 p-4 bg-white rounded-2xl shadow-md border border-gray-200">
<h1 class="text-3xl font-bold text-center text-gray-900 mb-2">
Code Shortcut - Welcome to Blade Heroicons
</h1>
<p class="text-center text-gray-600 mb-2">
You are now ready to use scalable, customizable icons in your Laravel application using inline CSS.
</p>
<!-- Heroicon example with inline CSS -->
<div class="flex justify-center">
<x-heroicon-o-building-office style="color: gray; width: 160px; height: 160px;" />
</div>
<p class="text-center text-gray-600 mb-2">
This icon uses inline CSS for size and color customization.
</p>
</div>
</body>
</html>
In this example, the <x-heroicon-o-building-office /> component uses the style attribute to set its color, width, and height directly, showing how easily Heroicons can be customized inside a Laravel Blade component.
Conclusion
By following this guide, you've successfully integrated Blade Heroicons into your Laravel 13 application, giving you an easy way to add clean, scalable, and customizable icons to your user interface. With support for both Tailwind CSS classes and standard CSS styling, Heroicons can be adapted to match virtually any design requirement while keeping your Blade templates simple and maintainable. Whether you're building navigation menus, action buttons, dashboards, or other UI elements, Blade Heroicons provides a convenient solution for enhancing the visual appeal of your application. As you continue developing your project, you can explore the full Heroicons collection and incorporate additional icons wherever they help improve usability and user experience.
For more details, refer to the official Blade Heroicons docs: https://github.com/driesvints/blade-heroicons.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments