Circum Icons

Consistent, ultra-minimalist line icons featuring simple visual geometry and rounded outlines.

STATS

OVERVIEW

Circum Icons is a beautifully refined, modern open-source line icon set built for high-end minimalist interfaces. Featuring rounded vertices, balanced empty space, and thin visual styling, these icons offer a highly consistent visual framework across 288 everyday UI concepts.

Unlike dense sets that contain variations for multiple visual weights, Circum Icons dedicates itself exclusively to a singular, thin line aesthetic. The design focuses heavily on uniform rounded corners and simple geometry, preventing icons from cluttering text or pulling too much focus from adjacent interface components.

Circum Icons is licensed under the Mozilla Public License 2.0 (MPL-2.0), making it free to use in proprietary and commercial applications. The library is distributed via standard npm packages ('circum-icons'), direct SVG routes, and via Iconify using the 'circum' collection prefix.

// VERDICTCircum Icons is an exceptional fit for clean mobile layouts, elegant lifestyle apps, and SaaS platforms that prioritize design aesthetics and minimal screen noise. Due to its limited concept count (288 icons), it may occasionally need to be paired with other libraries for highly specialized enterprise niches.

OFFICIAL LICENSE & COMMERCIAL USE

INSTALLATION

npm install circum-icons

npm install circum-icons

// Note: Standard ESM layout supports tree-shaking natively in Next.js applications.

// Fetch raw SVGs or use iconify/vue integration with 'circum:' prefix

// Integrate via standard Iconify Svelte wrapper or direct inline SVGs

<!-- CDN access to SVGs -->
<img src="https://raw.githubusercontent.com/klaufel/circum-icons/main/svg/home.svg" width="24" height="24" />

CODE EXAMPLES

import { Home } from 'circum-icons'

export function Layout() {
  return (
    <div>
      <Home size={24} />
      <span>Dashboard</span>
    </div>
  )
}

import { Settings } from 'circum-icons'

export function SidebarButton() {
  return (
    <button className="flex items-center gap-3 p-2 text-zinc-600 hover:text-indigo-600 transition-colors">
      <Settings className="w-6 h-6 stroke-[1.5]" />
      <span className="text-sm font-medium">Settings</span>
    </button>
  )
}

<!-- Render Circum icon using Iconify component -->
<iconify-icon icon="circum:home" style="font-size: 24px; color: #4f46e5;"></iconify-icon>

PROS & CONS

WHO SHOULD USE THIS

FREQUENTLY ASKED QUESTIONS

COMPARE WITH ALTERNATIVES

EXPLORE MORE