Add Custom Icons in Elementor Page Builder Widget

In this article, you will come to know how to add custom icons in elementor widget on a website! so let’s start.

At first, create a file in your elementor compatible plugin and include it according to the file include the procedure.

Suppose we want to add box icon, so we can write this code:

<?php

/**
 * Add custom icon into Elementor ICON field
 */

function my_function_icons() {
    return [

        // Box Icons
        ''                          => esc_html__( ' ', 'text-domain' ),
        'bx bx-group'               => esc_html__( 'Group', 'text-domain' ),
        'bx bxs-user'               => esc_html__( 'User BXS', 'text-domain' ),
        'bx bx-user'                => esc_html__( 'User', 'text-domain' ),
        'bx bx-book'                => esc_html__( 'Book', 'text-domain' ),

        'bx bx-search'              => esc_html__( 'Search', 'text-domain' ),
        'bx bx-support'             => esc_html__( 'Support', 'text-domain' ),
        'bx bx-cube'                 => esc_html__( 'Cube', 'text-domain' ),
        'bx bxs-user-circle'         => esc_html__( 'User circle', 'text-domain' ),
        'bx bx-envelope'            => esc_html__( 'Envelope', 'text-domain' ),
        'bx bx-caret-right'         => esc_html__( 'Caret Right', 'text-domain' ),
        'bx bx-home-heart'          => esc_html__( 'Home Heart', 'text-domain' ),
        'bx bxs-plane-alt'          => esc_html__( 'Plane Alt', 'text-domain' ),
        'bx bxs-car-garage'         => esc_html__( 'Car Garage', 'text-domain' ),
        'bx bx-donate-heart'        => esc_html__( 'Donate Heart', 'text-domain' ),
        'bx bxl-play-store'         => esc_html__( 'Playstore', 'text-domain' ),
        'bx bx-analyse'             => esc_html__( 'Analyse', 'text-domain' ),
        'bx bxl-apple'              => esc_html__( 'Apple', 'text-domain' ),
        'bx bx-gift'                => esc_html__( 'Gift', 'text-domain' ),
        'bx bx-right-arrow-alt'     => esc_html__( 'Right Arrow Alt', 'text-domain' ),
        'bx bx-credit-card-front'   => esc_html__( 'Credit Card Front', 'text-domain' ),
        'bx bx-refresh'             => esc_html__( 'Refresh', 'text-domain' ),
        'bx bxs-truck'              => esc_html__( 'Truck', 'text-domain' ),
        'bx bx-time-five'           => esc_html__( 'Time Five', 'text-domain' ),
        'bx bx-phone-call'          => esc_html__( 'Phone Call', 'text-domain' ),
        'bx bx-map'                 => esc_html__( 'Map', 'text-domain' ),
        'bx bx-globe'               => esc_html__( 'Globe', 'text-domain' ),
        'bx bx-plus'                => esc_html__( 'Plus', 'text-domain' ),
        'bx bx-play'                => esc_html__( 'Play', 'text-domain' ),
        'bx bx-chevron-right'       => esc_html__( 'Box Chevron Right', 'text-domain' ),
        'bx bx-cog'                 => esc_html__( 'Cog', 'text-domain' ),
        'bx bx-layer'               => esc_html__( 'Layer', 'text-domain' ),
        'bx bx-brain'               => esc_html__( 'Brain', 'text-domain' ),
        'bx bxl-twitter'            => esc_html__( 'Twitter', 'text-domain' ),
        'bx bxl-linkedin'           => esc_html__( 'Linkedin', 'text-domain' ),
        'bx bxl-instagram'          => esc_html__( 'Instagram', 'text-domain' ),
        'bx bxl-facebook'           => esc_html__( 'facebook', 'text-domain' ),
        'bx bxl-youtube'            => esc_html__( 'YouTube', 'text-domain' ),

    ];
}

function my_function_include_icons() {
    return array_keys(my_function_icons());
}

Adding Icon Function in your specific widget as follows:

$this->add_control(
	'button_icon',
	[
	    'label' => esc_html__( 'Button Icon', 'text-domain' ),
            'type' => Controls_Manager::ICON,
            'label_block' => true,
            'options' => my_function_icons(),
	]
);

Note: You must add a flat icon as the icon includes rules.

Suppose you want to add flaticon icon in your elementor widget, then code should be:

<?php

/**
 * Add custom icon into Elementor ICON field
 */

function my_function_icons() {
    return [

        // Box Icons
        ''                          => esc_html__( ' ', 'text-domain' ),

        'flaticon-global-shipping'  => esc_html__( 'Global Shopping', 'text-domain' ),
        'flaticon-24-hours-support' => esc_html__( '24 Hours Support', 'text-domain' ),
        'flaticon-security-payment' => esc_html__( 'Security Payment', 'text-domain' ),
        'flaticon-return-of-investment' => esc_html__( 'Investment', 'text-domain' ),
    ];
}

function my_function_include_icons() {
    return array_keys(my_function_icons());
}

Note: You must add a flat icon as the icon includes rules.

That’s all! If you have any queries, then let me know in the comment section.