--- title: Change Icons description: Recommended Template Usage image: http://cdn2.hubspot.net/hub/0/file-0-png/example.png --- [![GiantFocal](https://demo.giantfocal.com/hubfs/Giantfocal_2020/logos/giantfocal.svg "GiantFocal")](https://www.giantfocal.com) [![Schedule Free Consultation](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/48ec8c37-0656-4599-a246-b83d683ac343.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/48ec8c37-0656-4599-a246-b83d683ac343) ![template_documentation.jpg](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/backgrounds/template_documentation.jpg?width=1600&name=template_documentation.jpg "template_documentation.jpg") # TEMPLATE DOCUMENTATION [Back to Tutorial Listing](http://giantfocal.com/documentation) # Change Icons Most of templates utilise icons to beautify the page. Many are using [FontAwesome](http://fontawesome.io/), and some are images (PNG files).  In this documentation, we are going to show you how to swap the default FontAwesome icons.  --- ## In this article - [List of icons that available](https://demo.giantfocal.com/documentation/change-icons#) - [How to use FontAwesome](https://demo.giantfocal.com/documentation/change-icons#) --- ## List of Icons that Available You can find the completelist of icons here: [http://fontawesome.io/icons](http://fontawesome.io/icons/) --- ## How to use FontAwesome: 1. Choose an icon in the icons listing page ![choose_icons.gif](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal_Documentation/icons_Fontawesome/choose_icons.gif?width=500&name=choose_icons.gif "choose_icons.gif")   2. After choosing/clicking the icon it will load a new page, copy the code as shown in the live screenshot below: ![copy_fontawesome_code.gif](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal_Documentation/icons_Fontawesome/copy_fontawesome_code.gif?width=700&name=copy_fontawesome_code.gif "copy_fontawesome_code.gif")   3. Navigate back to the template. Find the icon module you are going to edit, and click 'edit options'. ![edit_options.gif](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal_Documentation/icons_Fontawesome/edit_options.gif?width=322&height=386&name=edit_options.gif)   4. A popup will appear and you can paste the code into the module. ![paste_code.gif](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal_Documentation/icons_Fontawesome/paste_code.gif?width=650&name=paste_code.gif "paste_code.gif")   5. Click Save and Publish the template then preview the page 6. If you don't like the icons styling (size and color). You will need to add a new class and edit it from the CSS file. **Note:** styling the icons will require knowledge in CSS. [![template_Doc_Sidebar.png](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/images/documentation/template_Doc_Sidebar.png?width=300&name=template_Doc_Sidebar.png "template_Doc_Sidebar.png") ](mailto:support@giantfocal.com) #### Get this pack while it's hot! [![attract-pack.jpg](https://demo.giantfocal.com/hubfs/Template_Packs/002.Free_Attract/screenshots/attract-pack.jpg "attract-pack.jpg")](https://demo.giantfocal.com/attract) [Get me a copy](https://demo.giantfocal.com/attract) ![Schedule a call](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/icons/icon_schedule-meeting.png?width=75&name=icon_schedule-meeting.png "Schedule a call") ### Questions? Schedule a free consultation and get all of your questions answered by one of our experts.  [![Schedule](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/cbf6cf5f-03eb-4d0e-8650-6a97a4dda4be.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/cbf6cf5f-03eb-4d0e-8650-6a97a4dda4be) ![HubSpot COS Templates](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/icons/icon_templates.png?width=75&name=icon_templates.png "HubSpot COS Templates") ### Browse Templates Check out our collection of HubSpot-approved templates. All templates are HubSpot-quality. [![View Templates](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/63441d10-c907-4bb1-b6f1-14c5f4978d2e.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/63441d10-c907-4bb1-b6f1-14c5f4978d2e) ![HubSpot Modules](https://demo.giantfocal.com/hs-fs/hubfs/GiantFocal/icons/icon_modules.png?width=75&name=icon_modules.png "HubSpot Modules") ### See Our Services So you are starting to know who we are now. Are you ready to check out more about our services? [![Yes, Please](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/ac07ef93-bbc8-46b6-b1b5-52e9dc918312.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/ac07ef93-bbc8-46b6-b1b5-52e9dc918312) GiantFocal GiantFocal is a digital media agency with more than 15 years of combined experience in the industry. - [**](https://facebook.com/giantfocal) - [**](https://www.twitter.com/giantfocal) - [**](https://www.linkedin.com/company/giantfocal) - [**](https://pinterest.com/giantfocal/) The Navigator Yes, I would love GiantFocal to help me to grow my website! [![Schedule Free Consultation](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2333817/bad561a5-5d12-415c-9258-e4686d5a2478.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2333817/bad561a5-5d12-415c-9258-e4686d5a2478)