Introducing Rails Icons: One Gem to Rule Them All

This article was first published on Rails Designer


Icons are critical for any app’s UI. They enhance a web app’s usability and aesthetic appeal, making a lot/complex information more accessible and navigation more intuitive for users.

I don’t run one app where I don’t use icons. Take a look at this example of one of my SaaS’:

Before and after of a Navigation without and with SVG icons

Even without being a designer, you can see the one with the (SVG) icons is easier to digest and it sure does look more appealing too!

Over the years, I’ve switched between multiple libraries. But I’ve been using Heroicons mostly in my latest products.

But no matter how much I like Heroicon–sometimes it’s missing a certain icon–I need one icon from another library. Now, it’s generally not advised to mix icon libraries. Often their styles are too different. But sometimes there’s no way around it. Using a brand’s logo from SimpleIcons, for example.

Previously I had to copy the icon into my app’s assets and recreate the logic to display a SVG file myself. Rails Icons allows you to do this with just one step: copying the icon into your app.

Usage of Rails Icons is straightforward.

icon "check"
Enter fullscreen mode
Exit fullscreen mode

Or pass a class and data-attributes:

icon "check", class: "text-green-500", data: { controller: "swap" }
Enter fullscreen mode
Exit fullscreen mode

If you want to add a custom icon library, that is not (yet) supported. You can add it to the libraries hash, like so:

RailsIcons.configure do |config| # … config.libraries.merge!( { custom: { simple_icons: { solid: { path: "app/assets/svg/simple_icons/solid", # optional: the default lookup path is: `app/assets/svg/#{library_name}/#{set}` default: { css: "w-6 h-6" } } } } } ) # …
end
Enter fullscreen mode
Exit fullscreen mode

You can then use it like so:

icon "reddit", library: "simple_icons", set: "solid"
Enter fullscreen mode
Exit fullscreen mode

Rails Icons is an OSS gem, sponsored by Rails Designer. It will soon be inluded as the default, replacing the current inline SVG’s.

You can check out the source code and help improve it (there are some good first issues to tackle.


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top