How to Add Custom Icons in WordPress in 3 Efficient Ways?

Custom icons in WordPress enhance your website’s visual appeal and user experience. They align with your branding and design, improving navigation and highlighting key features.

By replacing generic icons with unique symbols, you represent your content more effectively and improve accessibility.

Additionally, custom icons ensure that visuals scale properly across different devices and screen sizes.

What are SVG Custom Icons in WordPress?

SVG (Scalable Vector Graphics) are graphic elements defined using SVG markup. They allow you to create vector-based icons that are resolution-independent and scalable.

Creating custom SVG icons can be fun and rewarding, as can tailoring your design to fit your specific needs. SVG (Scalable Vector Graphics) is a versatile format that allows for high-quality graphics of any size.

To add SVG custom icons to your WordPress, you need to download SVG files. To do this, you need to make your WordPress site supportable for SVG files. Here is how you would do that.

How to make a WordPress website supportable for SVG Files?

There are two ways to add custom SVG icons to WordPress. You can do it with or without the help of plugins here, and we will tell you both ways.

How do you enable SVG upload WordPress without Plugins?

We can manually add SVG support to WordPress with custom codes. Here is how.

If you prefer to add SVG support manually without using a plugin, you can modify your theme’s functions.php file to allow SVG uploads. Be watchful and ensure your SVG files are sanitized to avoid security vulnerabilities while adding custom icons in WordPress.

1. Add Code to functions.php

Open your theme’s functions.php file (located in wp-content/themes/your-theme-name/functions.php) and add the following code:

				
					// Allow SVG uploads
function add_svg_mime_types($mimes) {
 $mimes['svg']='image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');
// Ensure the SVG file is sanitized
function sanitize_svg($file) {
 if ($file['type']==='image/svg+xml') {
     $svg = file_get_contents($file['tmp_name']);
     $svg=preg_replace('/<?xml.*??>/','', $svg); // Remove XML declaration
     $svg = preg_replace('/<!DOCTYPE.*?>/','', $svg); // Remove DOCTYPE declaratio|
     $file['tmp_name'] = tempnam(sys_get_temp_dir(), 'svg') . '.svg';
     file_put_contents($file['tmp_name'], $svg);
     $file['size']=filesize($file['tmp_name']);
 }
 return $file;
}
add_filter('wp_handle_upload_prefilter', 'sanitize_svg');
				
			

This code snippet does two things.

• Allows SVG files to be uploaded.
• Sanitizes SVG files by removing XML and DOCTYPE declarations to reduce potential security risks.

2. Update .htaccess for Security (Optional but Recommended)

To prevent direct access to SVG files which might contain scripts, you can add the following lines to your .htaccess file (usually located in the root directory of your WordPress installation):

				
					# Block direct access to SVG files
<FilesMatch ".svg$">
    Order Allow,Deny
    Deny from all
</FilesMatch>
				
			

This process of making a WordPress website supportable for SVG Files won’t be as safe as using a plugin, and for that, you can use this method instead.

How do you enable SVG to upload WordPress with Plugins?

There are a lot of plugins that can help you quickly enable SVG support and add custom icons in WordPress website.

SVG Support is a popular plugin that allows SVG uploads and provides options to enable inline SVG rendering.

Here are the steps to enable it in your WordPress.

1. Go to Plugins > Add New in your WordPress dashboard.
2. Search for “SVG Support.”
3. Install and activate the plugin.
4. Go to Settings > SVG Support to configure the plugin’s settings.

How do you add a custom Dash icon in WordPress?

Dash icons are a font-based icon set used in the WordPress admin interface to enhance the user interface with visual cues.

1. Register Your Custom Icon: To add this code, place it in your theme’s functions.php file or in a custom plugin.

				
					// Hook into the admin menu to register the custom icon
add_action('admin_menu', 'register_custom_dashicon');
function register_custom_dashicon() {
    // Register the custom menu item with a Dashicon
    add_menu_page(
        'Custom Page Title',   // Page Title
        'Custom Menu Title',   // Menu Title
        'manage_options',      // Capability
        'custom_page_slug',    // Menu Slug
        'custom_page_callback',// Function to display the page content
        'dashicons-admin-generic', // Dashicons class name for the custom icon
        6                      // Position
    );
}
// Callback function for the custom page content
function custom_page_callback() {
    echo '<h1>Custom Page</h1>';
    echo '<p>This is a custom admin page with a custom Dashicon.</p>';
}
				
			

2. Use Your Custom Icon: You can now use your custom Dashicon class (dash icons-custom) in HTML:

Replace f101 with the Unicode of your chosen Dash icon from the Dash icons library.

How to add custom icons in WordPress using Elementor?

Now, after learning and understanding how to add dash icons in WordPress, you should know how to add custom icons in elementor with the help of plugins.

Here is how you’d add a custom icon in Elementor, free or paid;

Adding a Custom Icon in Elementor Free

Adding custom icons in WordPress using a page builder provides you with the flexibility to add icons easily. To add custom icons in Elementor free, you can opt for these two methods:

1. Using an Image Widget

• Ensure your icon is in a suitable format (SVG, PNG, etc.) and uploaded to your WordPress Media Library.
• Edit the page or post where you want to add the custom icon with Elementor.
• From the Elementor panel on the left, drag the Image widget to the section where you want to place your icon.
• Click on the Image widget to open its settings.
• In the Image field, click Choose Image and select your custom icon from the Media Library.
• Adjust the size, alignment, and other styling options to fit your design needs.
• Once satisfied with the appearance, click Update to save your changes.

2. Using the HTML Widget

• Ensure your icon file (especially if it’s SVG) is ready and available.
• Edit the page or post with Elementor.
• Drag the HTML widget from the Elementor panel to your desired location.
• If you’re using an SVG file, you can embed it directly. Paste the SVG code into the HTML widget.
• Use inline CSS or custom CSS (if supported) to adjust your icon’s size, color, and other styling aspects.
• Click Update to save your changes.

Adding a Custom Icon in Elementor Pro

Elementor Pro offers more flexibility with Custom icons in WordPress, including its Icon Library and advanced widgets. You can use custom icons in several ways:

Using the Icon Box Widget

1. Upload your custom icon to the Media Library if it’s not already there.
2. Please edit the page or post it using Elementor Pro.
3. Find the Icon Box widget in the Elementor panel and drag it to your section.
4. In the Icon field, click on the icon to open the icon library.
5. Click on the Upload tab or choose an SVG icon if available.
6. Alternatively, you can use the Icon Library if your icon is included.
7. Adjust the icon’s size, color, and other styling options within the Icon Box settings.
8. Update the title, description, and other elements as needed.
9. Click Update to save your changes.

Using the Image Widget

1. Ensure your custom icons in WordPress are uploaded to the Media Library.
2. Please edit the page or post it using Elementor Pro.
3. Drag the Image widget to your desired location on the page.
4. Click on the Image field and choose your custom icons from the Media Library.
5. Customize the size, alignment, and other styling settings as needed.
6. Click Update to save your changes.

There are lots of plugins out there to choose from if want to add custom icons in WordPress, but Elementor is undoubtedly the best. It has a free and pro set of custom icons to choose from. You can choose from either as per your preference, but it is quite evident that the paid one will be superior to the free one.

Benefits of using custom icons in WordPress website

There are several benefits of using custom icons on a WordPress website, such as

1. Custom icons in WordPress help reinforce your brand identity and create a unique visual style.
2. They ensure design uniformity and alignment with your website’s aesthetic.
3. Custom icons can make navigation and content more intuitive, enhancing user interaction.
4. Tailored icons can better represent specific functions or features unique to your site.
5. VG icons are scalable and often lighter than image files, improving load times and responsiveness.
6. Custom icons in WordPress can be styled and adjusted easily with CSS, offering greater design control.
7. Also, the icon loading speed is very fast, which provides better UX.

Custom Icon Libraries for Your Widgets

Elementor Pro’s custom icon libraries feature allows you to upload your custom icons in WordPress from the leading icon library fun generators that are:

• Fontello Icon Set: Fontello is a web font generator that lets users create custom icon fonts by combining different existing icon sets in CSS and SVG formats, making it a flexible choice for web design.
• Icomoon Icons: Icomoon offers a library of vector icons and a tool for creating custom icon fonts, SVG sprites, and CSS sprites. It is famous for its user-friendly interface and wide icon collection.
• Fontastic Icon SVG: Fontastic creates icon fonts and SVG sprites from custom collections for web projects, focusing on performance and compatibility with modern web technologies.

These custom icons in WordPress are available in the icon library, so you can use them within any widget elements that use them.

Conclusion

Incorporating custom icons in WordPress enhances your site’s design and functionality. Whether using SVGs or plugins, custom icons improve branding, user navigation, and overall visual appeal.

By using these icons in WordPress, you ensure a distinct and interesting user experience, strengthening your website’s identity and effectiveness.