Moving social icons next to search in Dawn

[Bird_on_a_Wire]

Hello,

I need some help with my social buttons, please!

Two problems. First, I added my social buttons to my header by inserting this code at the end of my header.liquid file, but they are in the wrong position- they need to be next to the search button rather (see screenshot)

<ul class="list list-social list-unstyled" role="list">

{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="list-social__link link">
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}

Screenshot of the preferred position for socials

Then the second issue: I replaced the timber logo with a custom Artsy logo but if you watch the below screen grab- you will see that every time a new page loads the logo flashes large towards the top left of the screen for some reason. How can I stop this?

SITE: https://e1c8d3.myshopify.com/collections/kimathi-mafafo-1985

PASSWORD: thaits

Thanks in advance for any help!

[oscprofessional]

@Bird_on_a_Wire

Paste that code in this div. (header-icon)

[Ujjaval]

@Bird_on_a_Wire
in header.liquid
Find below line

and put your code below of that line

[harivishwakarma]

Hello @Bird_on_a_Wire

Goto header.liquid file and find this code ( header__icons) and paste your code ( see image)

[Bird_on_a_Wire]

Thank you @harivishwakarma , @oscprofessional & @Ujjaval your suggestions have all worked, the icons are in the correct place!

My only issue now is that the icon is still flashing very large when new pages load- see the screenshot below.

Do I need to fix something in my icon-tumblr.liquid file? Code below

{% comment %} 

OLD TUMBLER SVG 

 

NEW SVG BELOW
{% endcomment %}

[oscprofessional]

@Bird_on_a_Wire

ul.list.list-social.list-unstyled {
    height: 44px;
    overflow: hidden;
}
body .list-social__item svg {
    height: 1.8rem;
    width: 1.8rem;
    overflow: hidden;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

[Bird_on_a_Wire]

Thank you @oscprofessional all fixed!