Icon Block Plugin to Add Arbitrary SVG Files in WordPress

The Icon Block plugin is a handy little bit of code that lets you insert your own SVG icon or image into the Block Editor. It is undoubtedly one of the things to include in your WordPress launch checklist if you’re building a website now. The entire WordPress icon library with over 270 SVG icons to select from is included in the plugin.

Unlike other available blocks, the Icon Block plugin doesn’t need any third-party library to function. It is designed for developers and do-it-yourselfers; giving them the full capability of adding any SVG right into the editor without needing a third party.

The inspiration behind this plugin was to construct a basic SVG icon block that used only WP native components. The plugin would integrate these components into the block as more features are augmented to the core.

The Icon Block plugin fulfills several criteria for an icon choice that ties to the block system used by WordPress. The plugin, which is free to download and install, allows publishers to paste SVG codes of their choice into the text field. Publishers can then have the SVGs displayed in the editing area as well as on the website.

The solution is rounded out with several essential components and functions; that are block-supported. It comes with all necessary parts, which include colors and alignment. You may adjust the size of the icon, padding, and border-radius while you link it to any URL of your choice.

The plugin also features a “rotate” button. Users can take advantage of this rotate button when wishing to rotate their icons in 90° increments. That isn’t the end: The plugin also comes with buttons that allow flipping the icons horizontally and vertically.

Icon Block Plugin to Add Arbitrary SVG Files in WordPress 2

Use Cases of Icon Block Plugin

Using icons in WordPress can be a tricky task. Many solutions are available to add icons, such as using functions like the_title() and replacing it with SVG code inline in an HTML tag. Once these code snippets get too long and complicated, though, they break apart and stop working.

This plugin offers an alternative way to add icons into your posts and pages easily without disrupting the formatting of the post. Here are seven instances when this plugin will come in handy.

WordPress projects – Icon Block Plugin for Images and Content

Instead of wasting time writing code snippets or searching for free SVGs that you can use, its one-click functionality means you can jump right into those project footers and change things up with ease. One example is to use the icon block to add icons to header images, menus, or any other custom content you may be working on. The icons are responsive and retina-ready, which makes them look great on any screen size, from a laptop down to a mobile device.

Icon Block Plugin to Add Arbitrary SVG Files in WordPress The Icon Block 4

WordPress blog – Add Custom SVG Icons to WordPress

Another excellent use case is if you want to add custom icons to your blog posts. For example, if you have an affiliate site that reviews products and services, it might be helpful to put relevant icons by each review or development. This way, visitors know what they are clicking on right away without reading the article first. In this instance, all you need is a simple select and upload the icon to your web pages, hyperlink them, and suddenly they become clickable.

Also Read: 11 Reasons Why You Should Hire a WordPress Web Design Agency

Ecommerce store – Website Navigation with Custom SVG Navigation Icons

It’s also useful for eCommerce stores, especially when you’re looking to improve your site navigation. Not only does this plugin have simple functionality, but it also is retina-ready, which means any custom icons you add will look sharp pixel perfect.

If you end up using the SVG code for an icon; that isn’t already included in the WordPress library, then no worries. It comes with a convenient uploader where you can effortlessly search through all of them or upload your own .svg file.

Also Check: Top e-Commerce WordPress Theme for Business in 2021

Icon Block Plugin to Add Arbitrary SVG Files in WordPress The Icon Block 5

Personal portfolio – Add Custom Icons to Your WordPress Theme

Another excellent use case will be if you want to add some branding on your portfolio posts. Whether it is a social media site logo or perhaps even client social media logos, you can easily add them to your website by just one copy/paste of an SVG code. If you’re looking for a fast way to add icons to your WordPress site without spending too much time, this plugin will definitely come in handy.

UI design elements – Custom Icons for Blog and Website Content

Another use case that is not often considered with the WordPress plugin is; when it comes to using these icons as UI design elements. It’s not just about adding simple website navigation or social media links – uploading custom SVG files into the plugin opens up new possibilities. For example, if you create a blog post about flirting, it might be great to include some hearts over various phrases in the article. Of course, you could always do this by copying/pasting code snippets, but it’s just one click with this plugin.

Also Read: Best Free SEO Plugin For WordPress Must Have In 2021

Icon Block Plugin to Add Arbitrary SVG Files in WordPress The Icon Block 2

Pricing table – Custom Checkmark Icons

Another quite popular use case is for pricing tables. On a typical pricing table, every item has a set of features that makes it stand out from others. Then when you hover over each element; it turns into a checkmark icon that shows that the elements are included in the price. This is also quickly done by uploading SVG files; and copy-pasting an existing SVG code snippet.

Link post type – Any image or icon link code

The fact that it is retina-ready is also crucial; so any custom icons will look sharp regardless of what screen size they are viewed on. It’s lightweight, doesn’t slow down your website, and is very user-friendly, so anyone can start using this right away, even if you don’t have much coding knowledge.

Also Read: Top 15 Best Selling WordPress Themes Of All Times

How to Use Icon Block Plugin?

Add Arbitrary SVG Files in WordPress 3

Considering how jam-packed this plugin is with powerful features, using it may sound a bit daunting – but don’t fret. The best thing about Icon Block is that it’s both beginner-friendly and intuitive. Here’s how to use the plugin.

Step 1

The first step is simply to download the plugin. In downloading this plugin, you can search ‘Icon Block Plugin’ from your browser. It should appear in your search results. Download it from WordPress.org. Alternatively, you can also follow this link to download it. Once you’ve downloaded it, go to the Plugins section in WordPress, select add new, and then select upload and then install. Once installed, click ‘activate.’

Alternatively, you can likewise login to WordPress>go to the Plugins section> Select ‘Add New’ and then search for “Icon Block” in the search box area. Click “Install” once you’ve found it. Once the installation is complete, click ‘activate’ to begin using the plugin.

Add Arbitrary SVG Files in WordPress

Step 2

After activating, launch the block inserter. Do this within your Block Editor (Gutenberg). After opening the block inserter, search for “icon.” The icons should appear and allow you to use them directly on your page.

Website owners can create professional-looking content pages and post titles enhanced by custom graphics by adding these SVG files. With Icon Block for Gutenberg, you no longer have to download images from other websites or copy/paste code snippets. You can do everything within seconds within your WordPress editor itself. And if you’re taking classes and you feel that it probably is taking quite a lot of your time, why not consider collaborating with an assignment writing service, so you have all the time to learn WordPress basics.

Generally, it’s a great way to enhance a blog or website’s visuals without having to worry about; being limited by small image file sizes that are often associated with stock photography. All the designs are compact so that users can quickly load them into their websites without worrying about slowing down the page speed.

Also Check: Best Premium WordPress Themes And Their Stores

Final Words

The ease of customization makes the Icon Block plugin an excellent choice for bloggers who want to add flair and personality to their posts with minimal effort. With icons that fit almost anywhere, from prices to social media links, this plugin can help you spruce up your content for minimal effort.

Also Read: What are the Key Components of a Landing Page and How to Build It?


Author Bio: Charles Normandin creates one-of-a-kind pieces for businesses. He’s also a specialist in assignment help and speaks three languages fluently. Volunteering, painting, and rock climbing are among his favorite activities. According to him, days spent volunteering at the shelter help animals make their life better. Find him on Twitter at @Charles6.

Leave a Comment

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

%d bloggers like this: