Astrology Icons With CSS

Updated April 25, 2019 3 Comments
Originally posted June 24, 2014

This is an example of how to make astrology or zodiac icons with plain CSS. You’ll be able to use the icons as plain symbols, like in the image above. You’ll also be able to display the icons as buttons like in the following image. You’ll be able to change the color, as desired.

Vanilla CSS Astrology Zodiac Icons

You can jump down to the Usage section, which shows you the HTML code for each icon. In the Usage section, you’ll find the codes for the 12 zodiac sign icons, 13 planet/luminary icons, and special points icons (which includes a coment symbol and retrograde symbol), Asteroids symbol icons, and aspects icons.

You can also jump down to the Customize section which shows you how to change the appearance and color of the icons.

This is the required CSS:

.ai {
    font-style:normal;
    color:purple;
    font-weight:bold;
    font-size:24px;
    line-height:24px;
}
.ai.aries,.ai.taurus,.ai.gemini,.ai.cancer,.ai.leo,.ai.virgo,.ai.libra,.ai.scorpio,.ai.sagittarius,.ai.capricorn,.ai.aquarius,.ai.pisces {
    font-weight:normal;
}
.ai.aries:before {
    content:"\2648";
  display:inline;
  text-decoration:none;
}
.ai.taurus:before {
    content:"\2649";
}
.ai.gemini:before {
    content:"\264A";
}
.ai.cancer:before {
    content:"\264B";
}
.ai.leo:before {
    content:"\264C";
}
.ai.virgo:before {
    content:"\264D";
}
.ai.libra:before {
    content:"\264E";
}
.ai.scorpio:before {
    content:"\264F";
}
.ai.sagittarius:before {
    content:"\2650";
}
.ai.capricorn:before {
    content:"\2651";
}
.ai.aquarius:before {
    content:"\2652";
}
.ai.pisces:before {
    content:"\2653";
}
.ai.sun:before {
    content:"\2609";
}
.ai.moon:before {
    content:"\263D";
}
.ai.moon-variant:before {
    content:"\263E";
}
.ai.earth:before {
    content:"\2295";
}
.ai.mercury:before {
    content:"\263F";
}
.ai.venus:before {
    content:"\2640";
}
.ai.mars:before {
    content:"\2642";
}
.ai.jupiter:before {
    content:"\2643";
}
.ai.saturn:before {
    content:"\2644";
}
.ai.uranus:before {
    content:"\2645";
}
.ai.neptune:before {
    content:"\2646";
}
.ai.pluto:before {
    content:"\2647";
}
.ai.chiron:before {
    content:"\26B7";
}
.ai.north-node:before {
    content:"\260A";
}
.ai.south-node:before {
    content:"\260B";
}
.ai.part-of-fortune:before {
    content:"\2297"
}
.ai.lilith:before {
    content:"\26B8";
}
.ai.ceres:before {
    content:"\2A1"
}
.ai.juno:before {
    content:"\26B5";
}
.ai.pallas:before {
    content:"\26B4";
}
.ai.vesta:before {
    content:"\26B6";
}
.ai.conjunction:before {
    content:"\260C"
}
.ai.square:before {
    content:"\25A1"
}
.ai.trine:before {
    content:"\25B3"
}
.ai.opposition:before {
    content:"\260D"
}
.ai.semisquare:before {
    content:"\2220"
}
.ai.quintile:before {
    content:"\051"
}
.ai.biquintile:before {
    content:"\0062\0051"
}
.ai.retrograde:before {
    content:"\211E"
}
.ai.comet:before {
    content:"\2604"
}

Top ↑

Usage

This section shows you the HTML code for each astrology symbol. To use a symbol, paste the HTML code anywhere you want to display the astrology icon.

Zodiac Sign Symbol Icons

Aries symbol:
```

```
Taurus symbol:
```

```
Gemini symbol:
```

```
Cancer symbol:
```

```
Leo symbol:
```

```
Virgo symbol:
```

```
Libra symbol:
```

```
Scorpio symbol:
```

```
Sagittarius symbol:
```

```
Capricorn symbol:
```

```
Aquarius symbol:
```

```
Pisces symbol:
```

```

Top ↑

Planets and Luminaries Symbol Icons

Sun symbol:
```

```
Moon symbol:
```

```
Alternate Moon symbol:
```

```
Earth symbol:
```

```
Mercury symbol:
```

```
Venus symbol:
```

```
Mars symbol:
```

```
Jupiter symbol:
```

```
Saturn symbol:
```

```
Uranus symbol:
```

```
Neptune symbol:
```

```
Pluto symbol:
```

```
Chiron symbol:
```

```

Top ↑

Special Points, Comet and Retrograde Symbols

North Node symbol:
```

```
South Node symbol:
```

```
Part of Fortune symbol:
```

```
Black Moon Lilith symbol:
```

```
Comet symbol:
```

```
Retrograde symbol:
```

```

Top ↑

Asteroids Symbols

Ceres symbol:
```

```
Juno symbol:
```

```
Pallas symbol:
```

```
Vesta symbol:
```

```

Top ↑

Aspects Symbol Icons

Conjunction symbol:
```

```
Square symbol:
```

```
Trine symbol:
```

```
Opposition symbol:
```

```
Semisquare symbol:
```

```
Quintile symbol:
```

```
Biquintile symbol:
```

```

Top ↑

Customize The Appearance

I’ve made the icons purple. To choose your own color, edit line 3 in the CSS block. (The CSS block is the first code block at the top of this page.) In that code block, change purple on line 3 to your own color code.

You can make the icons look like square buttons, as in the second picture, above. That picture has a row of purple square icons and a row of white square icons. To make your icons look like those in the first row, add the following CSS, as is. This will make plum-colored icons. To make the icons white, as in the second row of the picture, change plum on line 2, to #f7f7f7. Or, change it to any desired background color for your icons.

.ai {
  background: plum;
  color:#141414;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  display:inline-block;
  margin: 5px;
  padding: 10px 15px 12px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, .1), inset 0 -10px 20px rgba(0, 0, 0, .1);  
}

Top ↑

See more: CSS, icons

We've 3 Responses

Jeremy
May 4th, 2018 at 11:14 pm
This is an incredibly helpful post. Thank you so much. Will definiately use this code in some web pages I am working on.

Wondering if you know where I can get an AI version of all these symbols. Would be good for creating graphics.

Reply ↓
Shawn Limbach
August 12th, 2018 at 8:04 pm
This is a wonderful find. Thank you so much

Reply ↓
mohamad
September 19th, 2021 at 10:57 am
thank you so much it’s very helpful post
i have a prroblem that i can’t change the color and the background color it’s still purpel
```
.ai {
    font-style: normal;
    font-weight: bold;
    font-size: 70px;
    color: #ffd700;
    background-color: #000;
}
```
Reply ↓