zodiacfonts

v1.1.1

Published

3 days ago

Free astrology icons & symbols — 55 hand-crafted, currentColor-ready SVG glyphs (zodiac signs, planets, houses, aspects, lunar phases). Part of Zodiac Fonts.

0High
0Medium
0Low

zodiacfonts

astrology zodiac icons symbols svg horoscope astrology-icons zodiac-icons astrology-symbols zodiac-signs planets astrology-glyphs

Zodiac Fonts — Free Astrology Symbols

Hand-crafted astrology icons & symbols as clean, currentColor-ready SVG. Zodiac signs, planets, lunar phases, houses, aspects and more — free for personal and commercial use.

Website · Documentation · Browse all symbols

[!NOTE] This repository hosts the Free tier (55 SVG symbols) so developers can consume Zodiac Fonts as a dependency. The full collection — 101 symbols across six installable font variants — is Pro. See zodiacfonts.com/documentation for the visual reference and Pro integration guide.

What's inside

| | Free (this repo) | Pro (for purchase) | | --- | --- | --- | | Symbols | 55 | 101 | | Format | SVG ¹ | SVG, PNG and installable fonts | | Font variants | Sans-serif · Regular | Sans + Slab × Light / Regular / Bold (6) | | Theming | currentColor-ready | currentColor + font-* | | License | SIL OFL 1.1 | Pro extended license (EULA) | | Use | Personal & commercial | Personal & commercial |

¹ This repository ships the free symbols as SVG only. Free PNG rasters are not included here — they are available exclusively via the download dialog on zodiacfonts.com.

Every SVG is normalized to a 0 0 512 512 viewBox and drawn with fill="none" stroke="currentColor", so it inherits color from CSS out of the box.

Installation

npm (recommended for apps and design systems)

npm install zodiacfonts

Then reference icons by their package path — no manual file copying needed:

// Vite / webpack / Rollup
import ariesUrl from 'zodiacfonts/icons/signs/aries.svg';

// React + SVGR (renders as a component)
import AriesIcon from 'zodiacfonts/icons/signs/aries.svg?react';

// Node.js / SSR (resolve the file path)
import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);
const ariesPath = require.resolve('zodiacfonts/icons/signs/aries.svg');

Download / clone (recommended for static sites)

git clone https://github.com/zodiacfonts/zodiacfonts.git
# or grab a ZIP from the "Code" button / the Releases page

Copy individual files — every symbol is a standalone .svg; just copy the ones you need from icons/.

Usage

Paths below use the repo-relative form (icons/signs/aries.svg) — substitute zodiacfonts/icons/signs/aries.svg when referencing from an npm install.

As an image

<img src="icons/signs/aries.svg" alt="Aries" width="48" height="48" />

Inline (so it inherits color)

<span class="zodiac-icon" role="img" aria-label="Aries">
  <!-- contents of icons/signs/aries.svg -->
  <svg viewBox="0 0 512 512" width="48" height="48">
    <path d="…" fill="none" stroke="currentColor" stroke-width="32" />
  </svg>
</span>

Framework notes

// React (Vite / CRA / Next) — import as a URL and use as <img>, or as a component via SVGR
import ariesUrl from 'zodiacfonts/icons/signs/aries.svg';
export const Aries = () => <img src={ariesUrl} alt="Aries" width={48} height={48} />;

<!-- Vue 3 + Vite -->
<template><img :src="aries" alt="Aries" width="48" height="48" /></template>
<script setup>import aries from 'zodiacfonts/icons/signs/aries.svg';</script>

<!-- Angular — copy icons/ into your assets and reference by path -->
<img src="assets/zodiac/signs/aries.svg" alt="Aries" width="48" height="48" />

Icon font

Zodiac Fonts ships an optional icon font layer alongside the SVGs, letting you render glyphs with a single HTML class — no image files or inline SVG required.

Quick start (CDN)

<!-- Add to your <head> — the font + all glyph classes load automatically -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zodiacfonts@latest/css/zodiac-fonts.min.css" />

<!-- Render a glyph -->
<i class="zf zf-aries" aria-hidden="true"></i>
<span class="zf zf-moon" aria-label="Moon"></span>

Quick start (npm / self-hosted)

npm install zodiacfonts

// Bundler (Vite, webpack, etc.) — plain CSS
import 'zodiacfonts/css';

// Sass / SCSS projects — override font path if needed
// $zf-font-path: '/your/assets/ZodiacFontFREE.woff2';
@use 'zodiacfonts/scss';

Or copy css/zodiac-fonts.min.css and the fonts/ folder to your project and link the CSS manually.

FREE vs PRO glyphs

The stylesheet ships CSS classes for all 101 glyphs — the 55 FREE ones and the 46 PRO stubs. FREE classes render immediately. PRO classes (marked /* PRO */ in the source CSS) require a Pro license and ZodiacFontPRO.woff2 to be self-hosted alongside ZodiacFontFREE.woff2.

See zodiacfonts.com/documentation for the Pro integration guide, character map, and live preview of all 101 glyphs.

PRO usage detector

Include the optional checker script to get a browser console warning whenever a PRO glyph class is used without the PRO font loaded. No code needed — it runs automatically.

<!-- plain HTML / SSG — add after your CSS link, runs on DOMContentLoaded -->
<script type="module" src="https://cdn.jsdelivr.net/npm/zodiacfonts@latest/js/zodiac-fonts.min.js"></script>

// SPA (React, Vue, Angular) — call inside your mount lifecycle
import { checkZodiacGlyphs } from 'zodiacfonts/js';

// React
useEffect(() => { checkZodiacGlyphs(); }, []);

// Vue
onMounted(() => checkZodiacGlyphs());

// Angular
ngOnInit() { checkZodiacGlyphs(); }

When a PRO glyph is detected the console shows:

[Zodiac Fonts] PRO glyph detected: .zf-ophiuchus
  This glyph requires a Pro license — it will not render with the FREE font.
  Self-host ZodiacFontPRO.woff2 after purchasing a Pro license.
  → https://www.zodiacfonts.com/documentation

Theming with `currentColor`

.zodiac-icon { color: rebeccapurple; }
.zodiac-icon:hover { color: gold; }

To recolor an external SVG (used via <img>, background, etc.) without inlining it, use the CSS mask technique:

.zodiac-icon {
  width: 48px;
  height: 48px;
  background-color: currentColor;            /* glyph color = text color */
  -webkit-mask: url('icons/signs/aries.svg') center / contain no-repeat;
          mask: url('icons/signs/aries.svg') center / contain no-repeat;
}

Sizing is just width / height (or font-size when inlined and using 1em dimensions).

Folder structure

zodiacfonts/
├── fonts/
│   └── ZodiacFontFREE.woff2         icon font (FREE codepoints only)
├── icons/
│   ├── signs/                       aries.svg, taurus.svg, … (12)
│   ├── main-planets/                sun.svg, moon.svg, … (11)
│   ├── lunar/                       new-moon.svg, full-moon.svg, … (8)
│   ├── celestial-points/            north-node.svg, south-node.svg, lilith.svg (3)
│   ├── dwarf-planets-and-asteroids/ chiron.svg (1)
│   ├── houses/                      house-one.svg … medium-coeli.svg (14)
│   ├── major-aspects/               conjunction.svg, trine.svg, … (5)
│   └── movements/                   retrograde.svg (1)
├── css/
│   ├── zodiac-fonts.css             icon font CSS (FREE rules + PRO stubs)
│   └── zodiac-fonts.min.css         minified (recommended for production)
├── js/
│   ├── zodiac-fonts.js              ES module companion script
│   └── zodiac-fonts.min.js          minified
├── scss/
│   └── zodiac-fonts.scss            Sass source with $zf-* override variables
├── glyphs.json                      machine-readable manifest of all 55 symbols
├── OFL.txt                          SIL Open Font License 1.1
├── package.json
└── README.md

The manifest (`glyphs.json`)

Use glyphs.json to generate pickers, sprites, or typed constants:

import manifest from 'zodiacfonts/glyphs.json' assert { type: 'json' };

for (const g of manifest.glyphs) {
  // g.name, g.slug, g.reference, g.codepoint, g.file
  console.log(g.slug, '→', g.file);
}

Each entry: name, slug (filename), reference (source id), codepoint (Private Use Area code point used by the icon font) and file (repo path).

Upgrading to Pro

Pro unlocks all 101 symbols plus the complete, installable font families (Sans-serif & Slab-serif × Light / Regular / Bold). The easiest way to render astrology charts is to register the fonts with @font-face and type the mapped characters.

Full Pro integration guidance, the character map and live previews: zodiacfonts.com/documentation.

License

The free Zodiac Fonts symbols are released under the SIL Open Font License, Version 1.1 with Reserved Font Name "Zodiac" — see OFL.txt.

You may use, study, modify and redistribute them, including commercially. The Font Software may not be sold by itself, and derivatives must not use the Reserved Font Name. Documents and artwork created with the symbols are unrestricted.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme