How to add packages with free symbols / Icons in enfold

I would upload an unspectacular iconfont. Here I have inverted numbers. Link

Then upload your coloured icons and make a note of the path for each icon.
now replace an icon of this font with the noted links of your coloured icons

this comes to your quick css:

.av_font_icon {
    overflow: visible !important;
}

[data-av_iconfont="solar-icons"]  {
  content: " ";
  background-size: 100px;    
  background-position: center center;
  background-repeat: no-repeat;
  border: none !important;
  color: transparent !important;
}

[data-av_iconfont="solar-icons"][data-av_icon="\e800"]{background-image: url(/wp-content/uploads/globe.gif) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e801"]{background-image: url(/wp-content/uploads/broken-spheres.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e802"]{background-image: url(/wp-content/uploads/bubbles.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e803"]{background-image: url(/wp-content/uploads/chrome-balls.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e804"]{background-image: url(/wp-content/uploads/film.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e805"]{background-image: url(/wp-content/uploads/glas-dots.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e806"]{background-image: url(/wp-content/uploads/glas-waben.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e807"]{background-image: url(/wp-content/uploads/green-world.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e808"]{background-image: url(/wp-content/uploads/home.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e809"]{background-image: url(/wp-content/uploads/hui.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e80a"]{background-image: url(/wp-content/uploads/lotus.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e80b"]{background-image: url(/wp-content/uploads/nachhaltig1.svg) !important}

Now – if you place your circled number 1 – you can see even in preview – the replaced colored icon:
And – yes even animated gifs can be inserted:

see replaced first icon : https://webers-testseite.de/abc/

PS: on that page with the snippets – you can see that i use the elements sizes for the icons – to generate the background-size :
https://enfold.webers-webdesign.de/colorized-font-icons/

if you like to use that too – remove from css code above the background-size line

function transfer_fontsize_to_backgroundsize(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($) {     
	$('.av-icon-char[data-av_iconfont="solar-icons"], .iconbox_icon[data-av_iconfont="solar-icons"]').each(function() {
		var iconLineHeight = parseInt($(this).css('line-height'));
		var iconPadding = parseInt($(this).css('padding'));
		$(this).css('background-size', (iconLineHeight + 2*(iconPadding))+'px');
	});
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'transfer_fontsize_to_backgroundsize');