or – if you like to replace it by a different svg graphic – you can do it by an uploaded graphic to media-library:

function avia_replace_default_icons($icons){
 $icons['svg__scrolldown'] =  array( 'font' =>'svg_wp-media-library', 'icon' => '50913');
 return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

change the icon ID to your file id

____________________________________________________________________________________________________
you can find the attachment-ID best in media-library list-view –
or in grid-view if you open the attachment-details ( look to the url that is opened )

or the arrow thought even more demanding ;)

:root {
  --burger-main-icon-width: 40px; /* === adjust to your needs === */
}

@media only screen and (max-width:1150px) {
  .av-hamburger {display: none}

  #header #avia-menu li.av-burger-menu-main.menu-item-avia-special,
  #top #wrap_all #header .av-small-burger-icon a:before{
    width: var(--burger-main-icon-width);  
  }
  
  #top #wrap_all #header .av-small-burger-icon a {
    display: flex; 
    justify-content: center;
    align-content: center;
    align-items: center;
  }

  #top #wrap_all #header .av-small-burger-icon a:before {
    content: "\e873";
    font-family: "entypo-fontello";
    font-size: var(--burger-main-icon-width);  
    color: var(--enfold-main-color-primary);
    text-align: center;
  }

  .av-burger-overlay-active #top #wrap_all #header .av-small-burger-icon a:before{
    font-size: calc(1.5 * var(--burger-main-icon-width));  /* === only if you like it === */
    color: #FFF;
    content: "\e877 \A \e873";
    line-height: 0.35em;
    animation: avia_fade_move_down 2s ease-in-out infinite;
  }
}

on my installation it works without any problem – if you use the webp images from media-library!
https://webers-testseite.de/webp-lightbox/

or: next suggestion – you are using a plugin that replaces jpgs by webp images ( f.e. from shortpixel – automatic calculation of jpgs to webp- and replacement in DOM )

As mentioned above

var defaults = {
	groups :	['.avia-slideshow', '.avia-gallery', '.av-horizontal-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu', '.woocommerce-product-gallery'],
	autolinkElements : 'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=webp], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="youtube.com/shorts"] , a[href*="screenr.com"], a[href*="iframe=true"]',
	videoElements  : 'a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="youtube.com/shorts"] , a[href*="screenr.com"], a[href*="iframe=true"]',
	exclude  :	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"], .pagination a'
},

a[href$=webp] is an autolinkElement – so there must be something that hampers this on your installation.

ok – you are right that on that icon the down-open-mini is used ! – you can change it by code snippet inside your child-theme functions.php:

function avia_replace_default_icons($icons){
 $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
 return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

you find those settings including the filter in init-base-data.php
there you see that the scrolldown icon is correlated with the down-open-mini svg.

charmap can be found in: charmap-svg.php

Isn’t it just a question of size? Wouldn’t specifying the width/height alone lead to the same result?
PS: in your case you are already use the svg icons. if someone uses the font-icons the snippet will be different –
and correlation is on default by:
'scrolldown' => array( 'font' => 'entypo-fontello', 'icon' => 'ue877' ),

try f.e.:

#top .scroll-down-link {
  height: 50px;
  width: 50px;
  bottom: 50px;
  background-color: rgba(255,255,255,0.3);
  border: 1px solid var(--enfold-socket-color-border);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  /*** animation: none; ***/
}
#top .scroll-down-link.avia-svg-icon svg:first-child {
  height: 50px;
}

#top .scroll-down-link:hover {
  background-color: rgba(255,255,255,0.8);
}

#top .scroll-down-link svg path {
  fill: var(--enfold-main-color-primary);
}

if you do not like the animation – just get rid of the outcommenting /*** ***/

try the code-block element instead – be shure you have choosen on advanced tab “Add Codeblock to content”

i think google likes to see an aria-label on that links.

function ava_script_mod() {
?>
<script type="text/javascript">
jQuery(function($){
  $('.scroll-down-link').each(function() {
    $(this).attr('aria-label', 'Passer à la section suivante');
  });
});
</script>
<?php
}
add_action( 'wp_footer', 'ava_script_mod', 9999 );

by the way this:

jQuery(function($){
// is shorthand for 
jQuery(document).ready(function($) {

At the very least, it would be good to know your header settings (logo left, menu below, etc.). For example, when I work on the new version with (logo left, menu right), the social bookmarks are located within main_menu. When I look at the board at the top here, they are located next to main_menu. – That depends on where I place the flex container.

so it all depends on your setting . so it will be the best to see the concerning site.

f.e. if you got a setting that the burger is visible from the beginning – like in freelancer demo

then you had to remove the media-query setting for screens above 768px.

try

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all .main_menu {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: flex-start;
    height: 100% !important;
  }
  #top #wrap_all .social_bookmarks {
    padding-right: 20px;
    border-right: 1px solid var(--enfold-header-color-meta);
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top .avia-menu.av_menu_icon_beside {
    border: none;
    padding-right: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header .main_menu > .social_bookmarks {
    display: block !important;
    top: 40px
  }
  .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    align-items: flex-start;
  }
  .responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside {
    padding-right: 0;
    margin-right: 0;
    border: none;
  }
}

and check please the style on screens less than 767px if that fits for you. on medical demo it works well.

So you uploaded your own symbols to Fontello? You didn’t enter a name for the font at the top of the Fontello page. That’s the one way to get the font name fontello.

Can you insert the icon as symbol if you place an element ( icon ) to a page?

Have you choosen that icon on Enfold Options – Social Profiles : at the end of that dropdown list your new entry?

next – i do not know it you can choose every string on that – because these settings will end in a class e.g. (social_bookmarks_tripadvisor and av-social-link-tripadvisor) if you got a space inside $icons[‘tripadvisor’] it might be broken. ( you can have Tripadvisor)
( the display_name is the Name that is shown on hovering that icon )

try:

function avia_add_custom_icon($icons) {
  $icons['tripadvisor']  = array( 'font' =>'fontello', 'icon' => 'uf262', 'display_name' => 'Trip Advisor');
  return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
  $icons['tripadvisor'] = 'tripadvisor';
  return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

your rule:

#top .avia-buttonrow-wrap a {
  max-width: 50% !important;
  font-weight: 500!important;
}

the selector is more specific because it has one ID that counts much more than classes.
thats the reason why the selector : .avia-buttonrow-wrap a does not win the race ;)

so try:

#top .textcloud .avia-button {
  text-align:left!important;
  font-weight:500!important;
}

#top .avia-buttonrow-wrap a {
  max-width: 50% !important;
  font-weight: 500!important;
}
@media only screen and (max-width: 767px) {
  #top .avia-buttonrow-wrap a {
    max-width: 100% !important;
  }
}

https://specificity.keegan.st/

Button Label as you like to show on frontend

https://webers-testseite.de/button-row/

link is: tel:+41123456789
tel:+(country-code)(rest of your number).
no spaces

Phone: 0228 555555

by the way – big advantage here of svg – you can change the fill colors.

#top #wrap_all .av-social-link-bluesky:hover a {
    color: #fff;
    background-color: #1185fe;
}
#top #wrap_all .av-social-link-bluesky a svg * {
    fill: var(--enfold-header-color-meta);
}
#top #wrap_all .av-social-link-bluesky a:hover svg * {
    fill: #FFF
}