How to change the search icon in the top search box?

great question, hope to see an answer.

What icons are you planning to use? Please be more specific and stay on topic. Each icon pack has its own way of being implemented, and without knowing which one you’re referring to, it’s difficult to suggest the right approach.

There’s a module called Font Awesome Pro : https://unacms.com/view-product/font-awesome-pro that can be applied, but it can also be modified to support a different icon pack if needed. Just let me know which icon pack you’re interested in, and when I have some time, I’ll take a look at how to adjust the implementation for it. Since every icon library uses a different integration method, it’s important to clarify this first before coming up with a proper solution.

In theory, it’s possible to apply any icon pack, but it takes a bit of work to make it happen. Some adjustments will be needed depending on how the pack is structured and how it should be integrated into the existing setup.

It’s also possible to apply a patch directly over the base icon pack. This way, you can override or extend the existing icons without fully replacing the entire implementation. However, it still requires some careful adjustments to make sure everything integrates properly.

But if you just want to replace a specific icon, the simplest way is to go directly to the main icon file and swap it with your own. As long as it’s compatible, it should work without any issues. That’s the quickest and easiest method.

For example, this is the default icon in UNA:

<svg class="sys-icon sys-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256"><path d="M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z" opacity="0.2">path><path d="M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z">path>svg>

eIf you just want to replace this one, the easiest way is to go directly to the main icon file and swap it with your own SVG code. As long as your icon is compatible, it should work without problems. Clear your cache afterward and you’ll see the new icon in place. That’s the quickest and cleanest solution.

Also, you can go to studio/builder_menu.php?page=items&module=system&set=sys_site, click on the menu item search button edit, and upload your custom icon there. It’s another easy way to replace icons without modifying the core files directly.

For the Icon section, you can either use a font icon, SVG, or emoji code. You can also select a file or upload a small image to be displayed next to the link. This provides flexibility in customizing the icon appearance.

Thanks

Hi @LeonidS Any idea? Thanks

Hi @LeonidS thanks a lot for the code. I wouldn't have figured it out on my own. It works well on Opera and Firefox browsers but not on Chrome. I have cleared my template cache in studio, also my browser's cache. I have even manually deleted my cache files from the /cache/ and /cache_public/ folders. It didn't work. I think that this replace method for custom images in Artificer is not supported by Chrome. I have tried both Chrome desktop and mobile. Please could you like to investigate this problem? Thanks

By the way, how does it work well here on unacms.com? I can see the SVG search icon and I am using Chrome.

When you're working on changes (like CSS, JS, or images), it’s a good idea to set a shorter cache expiration time in Nginx so your browser and visitors don’t see old cached content. Once everything works fine, you can increase the cache time for better performance.

Otherwise, Chrome will keep the old files cached, even if you manually clear the browser cache.

That’s because browsers like Chrome sometimes cache aggressively, especially for resources with long cache expiration times (like 1 year or 1 month). Setting a shorter expires time while you’re developing ensures that your changes are visible right away without being stuck with old cached files.

Here’s how you can do it in Nginx config:

  location ~* ^(/cache/|/cache_public/|/plugins_public/|/modules/|/studio/|/template/).+\.(jpg|jpeg|gif|css|png|js|ico|svg|eot|ttf|woff|woff2)$ {
    access_log off;

    # Cache expiration examples:
    # expires 1m;      # 1 minute
    # expires 10m;     # 10 minutes
    # expires 30m;     # 30 minutes
    # expires 1h;      # 1 hour
    # expires 6h;      # 6 hours
    # expires 12h;     # 12 hours
    # expires 1d;      # 1 day
    # expires 7d;      # 7 days (1 week)
    # expires 30d;     # 30 days (~1 month)
    # expires 90d;     # 90 days (~3 months)
    # expires 180d;    # 180 days (~6 months)
    # expires 1y;      # 1 year

    # Active cache expiration setting:
    expires 1m;

    # Cache-Control header example durations:
    # 60 seconds      = 1 minute
    # 600 seconds     = 10 minutes
    # 1800 seconds    = 30 minutes
    # 3600 seconds    = 1 hour
    # 21600 seconds   = 6 hours
    # 43200 seconds   = 12 hours
    # 86400 seconds   = 1 day
    # 604800 seconds  = 1 week
    # 2592000 seconds = 1 month
    # 31536000 seconds= 1 year

    # Optional Cache-Control header:
    # add_header Cache-Control "public, max-age=3600";

    try_files $uri =404;
}

Hi @LeonidS Thanks for your reply. For whatever reason, the new SVG search icon decided to show on Chrome today. Probably because of the way chrome hamdles cache. The old cache is keeped for some times. Yesterday I tried everything even the anonymous mode on both destop and mobile and that didn't work.

The replacer code you shared has the following parameters width="24px" height="24px". That makes the SVG icon a bit smaller. I have tried to change it to 32px x 32 px to match the size of the other icons in the Member Toolbar as it is here on unacms.com but that didn't work. Do I miss something in the replacer code? I can see here on unacms.com that you use 24x24px and the image is still bigger. Thanks

Well, the respective dimensions that are declared in the standard .svg file don't really matter when they are overwritten by CSS. You can control the size however you want via CSS, no matter what values are set inside the SVG file.

For example:

svg {
width: 32px;
height: 32px;
} 

This will force any SVG element to display at 32x32px, regardless of its internal width and height attributes.

The only thing that really matters inside the SVG is the viewBox, because it defines how the content inside scales and keeps its aspect ratio when you resize it with CSS. As long as the viewBox is set properly, you can style the size however you like from outside.

Also, if the SVG is inline, it’s a good idea to double-check for any other CSS that might affect its size, like max-width, max-height, or font-size if it’s inside a button or toolbar.

Please, I know what I am trying to achieve when I asked that specific question to @LeonidS