> 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

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2Fd2qbJ9DfP0AsSwdTPk7q%2FHome4_Topsocial.png?alt=media\&token=b67e23a3-7c18-403c-b465-a82997b89be3)

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