Hugo Icon is a free, single-page responsive Hugo theme that ports the Icon website template by freehtml5.co, giving businesses a one-page site with mission, services, gallery, team, and contact form sections.
What is Hugo Icon?
Hugo Icon is a free, open-source Hugo theme that converts your Hugo site configuration and content into a single-page website. It is a direct port of the Icon template created by freehtml5.co (the original is described as a Bootstrap-based template). The theme includes predefined sections for your business mission, services, a gallery, your team, and a contact form, all on one scrolling page. The port is maintained by SteveLane on GitHub, and the repository description calls it an "Icon theme for Hugo". The theme is licensed under CC BY 3.0, so you must provide attribution to freehtml5.co.
Key Features
- Single-page layout — The entire site is one page with dedicated anchor sections for mission, services, gallery, team, and a contact form, making it straightforward to fill in for a small business.
- Responsive design — The theme is described as responsive, so it adjusts to desktop and mobile screens.
- Hugo-native installation — You install it by cloning the GitHub repository into your
themesfolder (git clone https://github.com/SteveLane/hugo-icon.git) and then settingtheme = "hugo-icon"in yourconfig.toml. - Example configuration — The repo ships with an
exampleSite/config.tomlthat you can copy to your project root and edit, which speeds up initial setup. - Extensible with a blog — You can add a blog by placing content files in
/content/blog/(including an_index.md) and linking to it from the navigation partiallayouts/partials/nav.html. - Clear license terms — The theme is released under CC BY 3.0, the same license as the original freehtml5.co template, so proper credit is required.
Who should use Hugo Icon?
- Small businesses — Use the mission, services, and contact sections to present your company on a single page without building a site from scratch.
- Freelancers and creative studios — The gallery and team sections let you showcase portfolio pieces and introduce the people behind the work.
- Hugo developers — If you already use Hugo, this theme gives you a ready-made responsive layout that you can customize through partials and config files.
What can you do with Hugo Icon?
- Build a corporate one-pager: Fill in the content sections, copy the example config, and run
hugo serverto preview a complete single-page business site. - Add a blog alongside the one-pager: Drop markdown posts into
content/blog/with an_index.md, then add a menu link to the blog inlayouts/partials/nav.html. - Customize the main menu: Edit the navigation partial to add or remove links; the theme's instructions show an example anchor for a blog page.
How does Hugo Icon work?
Hugo Icon works like a standard Hugo theme: clone it into your themes directory, copy exampleSite/config.toml to your site root, set theme = "hugo-icon" in the config, and run hugo server (or hugo server -t hugo-icon) to see your site. The theme then renders your config and markdown content as a single-page static site.
Pros and cons
- Free and open source — No cost to use, and the source is available on GitHub for modification.
- Simple for a basic business site — The single-page structure is easy to populate if you need a straightforward online presence.
- Requires Hugo — You need a Hugo installation to build and serve the theme; it is not a standalone HTML template.
- Attribution required — CC BY 3.0 means you must credit freehtml5.co when using the theme.
Pricing
Hugo Icon is free to use under the CC BY 3.0 license; there are no paid plans or premium tiers.
FAQ
Is Hugo Icon free?
Yes. Hugo Icon is open source and released under the Creative Commons Attribution 3.0 license, so you can use it without paying. The only requirement is giving proper credit to the original template author, freehtml5.co.
How do I install Hugo Icon?
First install Hugo, then run git clone https://github.com/SteveLane/hugo-icon.git from inside your site's themes folder. Copy exampleSite/config.toml to the root of your site, set theme = "hugo-icon", and run hugo server to start.
Can I add a blog to Hugo Icon?
Yes. Create a content/blog directory with an _index.md file and add a markdown file for each post. Then open layouts/partials/nav.html and insert a link such as <a href="/blog">Blog</a> to expose the blog in the main menu.
What license does Hugo Icon use?
Hugo Icon is licensed under CC BY 3.0, matching the license of the original Icon template by freehtml5.co. This means you are free to use and adapt it as long as you provide attribution to freehtml5.co.
