> For the complete documentation index, see [llms.txt](https://jdocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jdocs.themeparrot.com/joomla-templates/runway/layout-customization/home-styles/home-style-4/home-4-top-social-icons.md).

# Home 4 Top social icons

### 27. Home 4 Top social icons

> Module position: topbar-left
>
> Module class suffix: Not Used

![](/files/uygQHInQ5ilrFVQUVluy)

If you want your module this way, **Go to backend: Extensions --> Module Manager --> New --> Select type as Custom html** with the settings below:

#### Step-1:

Create a new module type as "Custom Html"

#### Step-2:

Add the following html code in your custom Html Module

```html
<div class="social social-head"><a href="#" class="toptip" title="Linkedin">
<em class="icon-linkedin"></em></a><a href="#" class="toptip" title="Github">
<em class="icon-github"></em></a><a href="#" class="toptip" title="Dribbble">
<em class="icon-dribbble"></em></a><a href="#" class="toptip" title="instagram">
<em class="icon-instagram"></em></a><a href="#" class="toptip" title="Google Plus">
<em class="icon-google-plus"></em></a><a href="#" class="toptip" title="Facebook">
<em class="icon-facebook"></em></a><a href="#" class="toptip" title="Twitter">
<em class="icon-twitter"></em></a>
</div>
```

#### Step-3:

Once the module is created successfully SAVE & CLOSE The settings