New Icon Block, Amazing Icons and Font Awesome Pro

New Icon Block, Amazing Icons and Font Awesome Pro

Last Updated on September 12, 2022

This update is a huge one. We bring you a new Icon Block, enhanced icon searching, the ability to upload your own SVG icons, lots of color options and now you can also use your Font Awesome Pro icons in Gutenberg. Get these now in 2.7.0.

Our main focus in this update is to bring you much more powerful icons. Stackable already had icons before, now we’ve sprinkled a ton of fairy-dust on them. Here’s what’s new:

New Icon Block

First off, we now have a dedicated Icon Block which allows you to display up to 8 icons with optional titles for each icon.

Once you’ve picked an icon, you can add titles and turn your icon into a link. We have also added a lot of styling options, you can change the color of the icon or use gradient colors on them, create multicolored icons, add outlines, and add a background shape. More on these available styles below.

Font Awesome Integration

We’ve been working closely with the Font Awesome guys in order to bring you a much more amazing experience when picking and using icons for your websites. Shout out to the Font Awesome team for their unwavering dedication to icons. 🤘

Now You Can Use Your Font Awesome Pro Icons

If you love your icons and you’re a Font Awesome Pro subscriber, now you can use your icons inside Gutenberg!

Getting started with using your Font Awesome Pro icons is easy, all you need is to enter in your Font Awesome Pro Kit code and you’re set to go. Read our docs for a guide on how to use your Pro subscription with Stackable.

Here are Pro icons in action inside our icon picker.

Improved Icon Searching

We’ve beefed up icon searching, and it’s easier than ever to find the right icon.

Previously, you’d need to know the exact term or name of the icon in order to find it. For example you’d have to search for “gear” or “cogs” if you want some gear icons. This made things quite difficult to find icons which fit your purpose.

In this update, through our better integration with Font Awesome, icon searching is now better than ever. Searching for icons now takes a more natural approach and would provide you with results which are related to your search terms. Now, searching for “settings” would now give you icons which are related to settings such as a gear, a toolbar, a wrench, some dots, and more.

You Can Now Upload Your Own SVG Icons

If you want use your own SVG icons that you got from other sources such as FlatIcons or Icons8, now you can easily use them inside your Stackable blocks.

When you have an icon picker open, just click on the Upload SVG button, or just drag an SVG file from your desktop into the window to upload them. It’s easy as that.

The best part here is that our icon color options would also work for your custom icons.

The icon sampled here was made by Freepik from www.flaticon.com

Gradient and Multicolored Icons

Stackable Premium users will have access to two powerful icon color options: color gradients and multicolor.

For color gradients, you can color the icon itself, or place the icon inside a shape with a gradient. This also works for custom uploaded icons.

The multicolor feature on the other hand lets you use more than one color (and opacity) for your icon. If you’re using Font Awesome Pro icons, Duotone icons work great with this multicolor feature. This also works for custom uploaded icons.

The two icons above are Font Awesome duotones which we’ve used two different colors, the third icon is a custom SVG which uses 5 colors.

If you’re curious about how multicolor works, we automatically detect the shapes in your custom SVG and let you assign different colors and opacities for each. We have more information about this in our docs.

Icon Background Shapes

Another new treat for Stackable Premium users are Icon Background Shapes. These are shapes (similar to our image blob shapes) that you can place behind your icons.

These shapes are great for adding some unique decorative effects. You have more than 50 different shapes to choose from. They’re very flexible, you can change their color, opacity, resize them and move them.

Conclusion

We can’t wait for you to try out our new icons and see what amazing designs you come up with in your websites.

If you want to discuss and suggest new things you’d like to see in Stackable, be sure to join Stackable Community in Facebook.

11 thoughts on “New Icon Block, Amazing Icons and Font Awesome Pro

  1. Nice but I’d be actually a lot more excited if all these options could also be applied to your Icon List block, which has currently only five sad icons to choose from. Linking it to this new icon collection would be awesome.

    1. Thanks for your suggestion, I think this is a great idea. We’ll see what we can do about this in the future. 🙂

  2. Personally I like the icon block but not in favour of Font awesome as it affects the site speed. But for those who love fonts awesome, it’s a welcome addition.

    1. I’d like to point out that our implementation doesn’t load unused icons in your site, just the actual icon you’re using. So there’s almost no effect in the site speed.

    1. Hi! As of now, we only support icons from Font Awesome. However, if you want to use other icons, you can upload or drag in your own SVG icon in the icon picker of our Icon Block. Alternatively, you can also use an Image block, then upload an SVG in your Media Library.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.