DEV Community

Cover image for How to Use Blade Icons in Laravel Projects
Masum Parvej
Masum Parvej

Posted on • Edited on

How to Use Blade Icons in Laravel Projects

#webdev #laravel #icon #designpatterns

✍️ How to Use Blade Icons in Laravel: A Comprehensive Guide

Blade icons are a fantastic choice for clean, scalable icons in your Laravel applications. They're easy to use, style, and integrate directly into your Blade templates without needing complex font files or extra dependencies. This guide will walk you through the process, from setup to styling and accessibility.

How to Use Blade Icons in Laravel

Using Blade icons is a straightforward process, whether you're using SVG components or a font-based library. We'll use icons from Hugeicons as a practical example.

1. Load the Icon Package

For font-based icons, you'll typically load a CDN link in your layout's <head> tag. This gives you access to a library of icons that can be referenced by class names.

<link rel="stylesheet" href="https://cdn.hugeicons.com/font/hgi-stroke-rounded.css" />
Enter fullscreen mode Exit fullscreen mode

2. Add Icons to Blade Templates

With the CDN loaded, you can now add icons using a simple <i> tag with the appropriate classes. The first class often defines the style, and the second is the unique icon name.

<i class="hgi-stroke hgi-abacus"></i>
<i class="hgi-stroke hgi-alert"></i>
Enter fullscreen mode Exit fullscreen mode

3. Style with Utility or Custom Classes

You can easily style icons using utility classes from frameworks like Tailwind CSS or by defining your own custom CSS classes.

<i class="hgi-stroke hgi-alert text-red-500 text-xl"></i>

<i class="hgi-stroke hgi-alert icon-lg"></i>
Enter fullscreen mode Exit fullscreen mode

You can define the custom classes in your stylesheet to control size and color:

.icon-sm { font-size: 16px; color: #6b7280; }
.icon-lg { font-size: 32px; color: #e3342f; }
Enter fullscreen mode Exit fullscreen mode

4. Ensure Accessibility

Accessibility is crucial. Always consider whether an icon is decorative or conveys meaning.

  • For decorative icons, hide them from screen readers to prevent unnecessary announcements.

    <i class="hgi-stroke hgi-star" aria-hidden="true"></i>

  • For meaningful icons, add an aria-label to provide context for assistive technology.

    <i class="hgi-stroke hgi-alert" role="img" aria-label="Warning"></i>

5. Use Icons in Buttons and Links

When using icons within interactive elements like buttons, proper accessibility is even more important to prevent duplicate announcements.

  • Button with no visible text: Use aria-label on the button itself.

    <button aria-label="Save">
    <i class="hgi-stroke hgi-save" role="img"></i>
</button>

  • Button with visible text: Hide the icon from screen readers and let the text provide the context.

    <button>
    <i class="hgi-stroke hgi-save" aria-hidden="true"></i> Save
</button>

Common Mistakes to Avoid 🚫

To keep your markup clean and accessible, avoid these common pitfalls:

  • Missing aria-hidden: Always hide decorative icons from screen readers.
  • No label for meaningful icons: Ensure icons that convey action or status have an aria-label.
  • Using inline styles: Prefer utility or custom classes for sizing to maintain consistency and responsiveness.
  • Unnecessary containers: Use the icon component or tag directly without extra <div> or <span> wrappers.
  • Ignoring responsive sizing: Design your icons to scale properly across different screen sizes.

Top Blade Icon Libraries for Laravel

While you can use any icon library, these are some of the most popular and well-supported options for Blade and Laravel.

Hugeicons

Hugeicons offers a massive collection of over 40,000 icons. It provides a free version with 4,000+ stroke-rounded icons, and a dedicated Blade wrapper makes it a breeze to use as components.

  • Package: afatmustafa/blade-hugeicons
  • Usage: <x-hugeicons-youtube />
  • GitHub: afatmustafa/blade-hugeicons

Lucide Icons

As a modern fork of Feather Icons, Lucide is actively developed and expands on the original minimalist set. It's an excellent choice for clean, consistent designs, particularly in projects that use Tailwind.

  • Package: mallardduck/blade-lucide-icons
  • Usage: <x-lucide-home />

Zondicons


Zondicons are known for their bold, geometric style, making them perfect for dashboards and admin panels where clarity is key. They integrate seamlessly with the Blade UI Kit.

  • Package: blade-ui-kit/blade-zondicons
  • Usage: <x-zondicon-home />

Feather Icons

Feather Icons are a minimalist favorite. Their lightweight, elegant design makes them fast-loading and easy to customize. There's a dedicated Blade component package that supports intuitive naming.

  • Package: codeat3/blade-feather-icons
  • Usage: <x-feather-home />

Final Thoughts ✨

Blade icons provide a clean, scalable, and hassle-free way to integrate icons into your Laravel projects. By following these steps and best practices, you can ensure your icons are not only visually appealing but also accessible and easy to maintain. Hopefully, this guide helped you get started and choose the perfect icon library for your next project. Happy coding!

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.