Skip to content
DesignMunkDesignMunk Submit a site

Hugeicons

hugeicons.com
Beautiful icons that make products feel premium.
Design Tools Developer Tools Next.js Tailwind Homepage cera
Share Visit site
hugeicons.com DESKTOP · 1440
Hugeicons

AI Breakdown

Design export

---
version: alpha
name: Hugeicons
description: Beautiful icons that make products feel premium.
colors:
  primary: "#0a0a0a"
  secondary: "#1c2c0c"
  tertiary: "#afe67f"
  neutral: "#ffffff"
  border: "#cff1c2"
  brand-hippie-green: "#648c55"
  brand-everglade: "#27482c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: cera
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.032em
  headline-md:
    fontFamily: cera
    fontSize: 37px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.027em
  headline-sm:
    fontFamily: cera
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.19
  headline-xs:
    fontFamily: cera
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.19
  body-md:
    fontFamily: cera
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.023em
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 56px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#1d3208"
    rounded: "{rounded.sm}"
    padding: 17px 16px
    height: 50px
  button-secondary:
    backgroundColor: "#f8f9f8"
    textColor: "#1d3208"
    rounded: "{rounded.sm}"
    padding: 17px 16px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 40px 60px
---

# Hugeicons: Mint-Green Actions and Rounded Cera Headlines

## Overview

Hugeicons targets designers and developers with a premium yet approachable aesthetic. The interface is light, with crisp black text and a fresh mint accent. Spacing is generous and predictable, keeping dense content (styles, integrations, examples) scannable. The overall feel is practical, polished, and trustworthy rather than flashy.

## Colors

- **primary (#0A0A0A):** Deep ink for headlines, body text, and icons on light surfaces.
- **secondary (#1C2C0C):** Dark evergreen for supporting text on tinted or promotional elements.
- **tertiary (#AFE67F):** Mint accent for primary CTAs and key highlights; avoid for long passages of text.
- **neutral (#FFFFFF):** Paper white base for pages, cards, and modals.
- **border (#CFF1C2):** Mint whisper used for hairline dividers, card delineation, and subtle panels.
- **brand-hippie-green (#648C55):** Supporting brand tint for illustrations or secondary accents.
- **brand-everglade (#27482C):** Deep brand green for dark accents, badges, or hover states.
- **surface (#FFFFFF):** Default surface color, equal to neutral.
- **on-surface (#0A0A0A):** Text and icon color on light surfaces; maintain AA contrast with surface.

## Typography

The system uses Cera (custom, rounded geometric sans) for all levels. Headlines scale from 44px/700 (lg) to 26–31px/500 (sm–xs) with tight tracking for impact; body runs 22px/400 at 1.4 for legibility.
- Availability: Cera is self-hosted (type: custom). Agents cannot fetch it from Google Fonts.
- Recommended substitutes (obtainable): Nunito (Google) for rounded friendliness, Rubik (Google) for slightly squarer rhythm, and Quicksand (Google) for soft terminals at lighter weights.
- Pairing guidance: keep a single-family system; rely on weight (700/500/400) and size tiers for hierarchy rather than mixing families.

## Layout

Spacing follows an 8-point logic: 8, 16, 32, 56, 80. Use sm (16) for intra-component gaps, md (32) for padding inside cards and blocks, lg (56) for vertical section rhythm, and xl (80) for major band transitions. Content stacks vertically with clear breathing room; icon grids and integration tiles align to equal columns with md (32) gutters. Keep headings close to their body (sm) and give CTAs md top margin to form clear action groups.

## Elevation & Depth

Depth is restrained. Only a subtle sm shadow is available for light lift on hover or sticky UI. Most separation comes from the mint border (#CFF1C2), white surfaces, and spacing. Use the inner inset stroke for inputs or code blocks that need a defined container without visible elevation. Avoid heavy shadows; md, lg, and xl are intentionally none.

## Shapes

Two radii define the language: 8px (controls) and 12px (containers). Buttons and pills use 8px for approachable precision; cards and tiles use 12px to read as larger, tactile blocks. Links are square (0px) to remain textual. Maintain consistency—do not mix other radii.

## Components

Buttons and card
- Primary Button: 50px height, 17×16 padding, 8px radius, background #AFE67F with text #1D3208. Use for the main action per section.
- Secondary Button: Same size and radius, #F8F9F8 background with #1D3208 text for lower-emphasis actions.
- Link Button: Text-only with #0A0A0A, radius 0.
- Card: White (#FFFFFF) surface, 12px radius, 40×60 padding, black text.

### Icon Style Selector
Rows of style tiles (Stroke, Twotone, Duotone, Solid, Bulk; Rounded/Standard/Sharp). Implement as 12px-radius cards with md (32) internal gap and border #CFF1C2. Headings use headline-xs (26px/500); sample icons align to a uniform grid.

### Integrations Grid
A grid of popular frameworks and platforms. Use 12px-radius tiles, md (32) gutters, sm (16) internal spacing, and center-aligned logos. Include a "See all packages" link using the link style.

### CDN/Font Code Block with Copy
Monospace is not tokenized; wrap the snippet in a white card with inner inset border and sm shadow on hover. Right-align a secondary button labeled "Copy".

### Figma Plugin Promo
Two-column layout: left copy, right feature bullets. Headline uses headline-sm (31px/500), with primary and secondary CTAs stacked at sm (16). Keep the primary CTA (#AFE67F) first.

### Feature Pills Row
Three short benefits ("Nicely customizable", "Tree shakable", "Lightweight & scalable"). Render as 8px-radius pills with border #CFF1C2, sm (16) horizontal padding, and body-md (22px/400) text.

### Examples Gallery
A mosaic of UI screenshots, each in a 12px-radius card with no heavy shadow, sm (16) gap between items, and captions in body-md.

### Customer Marquee
A horizontally scrolling or wrapped list of logos under "Our top customers." Use subdued logos on white, spaced by sm (16) with optional border separators.

### Regional Discount Ribbon/Modal
Temporary promotional unit: white surface, 12px radius if modal, body-md text, and primary button for "Buy now." Place away from the main hero CTA to avoid competition.

## Do's and Don'ts

- Do use #0A0A0A text on #FFFFFF surfaces and reserve #AFE67F for primary actions and highlights.
- Do separate dense content with #CFF1C2 borders and md (32) padding instead of heavier shadows.
- Do keep buttons at 50px height with 8px radius; align multiple CTAs on a single baseline.
- Don't introduce new radii or ad-hoc shadows; stick to 8px/12px and the sm shadow only.
- Don't repeat long style lists in a single viewport; paginate or collapse to reduce scanning fatigue.
- Don't place promotional ribbons directly over the hero's primary CTA; space them to preserve hierarchy.

## Agent Prompt Guide

Quick color reference
- Text: #0A0A0A
- Background: #FFFFFF
- Border: #CFF1C2
- Accent: #AFE67F

1) Build a hero
- Font-family: "Cera", Nunito, Rubik, Quicksand, system-ui
- H1: 44px, 700, line-height 1.12, letter-spacing -0.032em, color #0A0A0A
- Body: 22px, 400, line-height 1.4, color #0A0A0A, max-width 60ch
- Primary button: 50px height, 17px 16px, 8px radius, bg #AFE67F, text #1D3208
- Section padding: top/bottom 80px, sides 32px

2) Create a three-up features row
- Container: white card, 12px radius, padding 40px 60px, border 1px solid #CFF1C2
- Each feature: headline 26px/500, body 22px/400
- Gaps: 32px between columns, 16px between heading and body

3) Integrations grid with CTA
- Grid of logos in 12px-radius tiles on white; 32px gutters
- Title: 31px/500; helper text: 22px/400
- Link style CTA: color #0A0A0A, no underline until hover

4) Code block with copy button
- Wrapper: white card, 12px radius, 40px 60px padding, inner 1px inset border (rgba(0,0,0,0.12))
- Monospace snippet inside; right-aligned secondary button (50px, 8px radius, bg #F8F9F8, text #1D3208)
- Section margin: 56px above, 56px below

## Similar Brands

- Streamline Icons — similarly friendly geometry and exhaustive catalog; Streamline leans more toward blue accents vs. Hugeicons' mint.
- IconScout — marketplace breadth and developer tooling; visual system is bolder with stronger shadows than Hugeicons' minimal elevation.
- Phosphor Icons — clear developer story and multi-style set; Phosphor defaults to darker, higher-contrast accents.
- Heroicons — opinionated, open-source set with strong docs; compared to Hugeicons, styling is monochrome and less brand-driven.

More like this

Browse Design Tools →
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 14 hours ago
openlayer.com
Openlayer AI
Openlayer
Control your AI, layer by layer.
Homepage · 16 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 1 day ago