Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/danieldunderfelt/unicon

A CSS library for applying Unicode icons easily.
https://github.com/danieldunderfelt/unicon

Last synced: 5 months ago
JSON representation

A CSS library for applying Unicode icons easily.

Awesome Lists containing this project

README 

          
# Unicon

A CSS library for applying Unicode icons easily. This library is an alternative to other "designed" logo packs or icon fonts. Unicode contains many truly useful icons, and often they are very usable in web design. This library is an easy-to-use interface to the treasure trove that is Unicode.



Advantages;



- No font file. Many fonts already contain these glyphs!

- Very small file size.

- Display in virtually all devices.

- Easily add your own.

- Versatile; Use with a Sass mixin, normal classes or data attributes.



## Installation



Install with Bower:



```

bower install unicon

```



or npm:



```

npm install unicon

```



## Usage



You can use Unicon with a mixin, normal CSS classes or attributes.



### Mixin

The mixin is the primary way to use this library. Please only use the `unicon.css` file if your project is not using Sass.



To use the mixin, `@import` the `unicon.scss` file into your project. The `unicon` mixin will then be available and can be used like so:



```

@include unicon(arrow-forward, after) {

    /* additional styles for the pseudo element */

}

```



The first argument is the name of the icon as specified in `_icons.scss`. The second argument is the pseudo element you want the icon to display in. It is optional, and the default is `after`. If you write more styles into the body of the mixin block, those will be added to the pseudo element.



### Classes



Classes and attributes can be used in projects that do not use Sass. Simply add `unicon-[icon name]` to any element to display an icon. The default pseudo-element is, as with the mixin, `after`. To use the `before` pseudo-element, append `-before` to the class name.



Example:



```

I have an icon!


I have an icon in the before pseudo-element!


```



### Attributes



Unicon includes selectors for two attributes: `data-unicon-before` and `data-unicon-after`. Enter the icon name as the value for one of those data attributes to display an icon using the `before` or `after` pseudo-element respectively.



Example:



```

Airplane

Airplane

```



## Customisation



If you only use this library through Sass, please set the `$unicon-enable-classes` variable to `false`. This will prevent unnecessary CSS in your output.



There are a few style rules added to the pseudo element: padding and display and font-family. The icon uses `display: inline` and `padding-left: .4em` (or `padding-right`, depending on the pseudo element) by default. You can overwrite these with the variables `$unicon-display` and `$unicon-padding` respectively.



You can also set the font the icons use globally. Overwrite the `$unicon-font` variable to accomplish this. By default Unicon uses Georgia, as it displays all icons nicely. Many fonts do include all glyphs, but they might display them differently. You'll have the best luck with system fonts.



All variables use the Sass `!default` switch. As such, you should overwrite them *before* `@import`ing the `unicon.scss` file.



```

$unicon-padding: .5em;

$unicon-display: inline-block;

$unicon-enable-classes: false;



@import 'unicon';

```



## Extension



You can also extend Unicon's icon list easily, no need to submit a pull request or fork the library! Simply use Sass' `map-merge` function to add icons to the list.

You need a name for the icon which you are free to come up with yourself, as well as the CSS-specific Unicode identifier. You can find this using [Graphemica](http://graphemica.com/). Navigate to the page of a glyph, scroll down, and you'll find an entry for the CSS identifier. Alternatively, take the last four characters of the Unicode code point for a glyph (for example, from `U+02FF` you'd take `02FF`) and append them to `\00`.



Remember to assign the result of the `map-merge` call to the `$unicon-icons` variable. Like so:



```

$unicon-icons: map-merge($unicon-icons, (

    'small-arrow-left': \0002FF;

));

```



Please keep in mind that if you use a name that already exists, the existing icon will be overwritten by your new one.



## Contributing



Pull requests welcome! In lieu of a formal style guide, please try to mimic the existing code style as closely as possible.



If you want to add an icon, please follow the naming guidelines:

`[style]-[style-modifier]-[object-type]-[direction]`



Only the object-type is mandatory, as that describes the icon.



Style mostly describes if the glyph is filled or is an outline. If it's filled, or if the distinction is not important, omit the `[style]` part.



`[style-modifier]` further describes how the icon looks. For example, `wavy`, `thin` or `double` would constitute the `style-modifier` part of the icon name.



`[object-type]` is the identifier for the icon itself. It might be `arrow`, `triangle`, `sun` or `cross`. This is the only mandatory part of the name. You may hyphenize the object-type if necessary.



Lastly, there's the `[direction]` segment. This is only really applicable to arrows and describes where the arrow is pointing.



Please only submit a pull request with generally useful Unicode icons. If you need to use an icon through the Unicode logic, please extend the `$unicode-icons` map.



I will probably reject the following:



- Emoji. This library is not for emoji. Yes, I know they're unicode.

- Letters. Even unusual letters are probably not needed for this library.

- That also goes for pictograms, hanzi, kanji or other non-western glyphs. Except where they can be used as an icon.



Just keep in mind that the mission of this library is to provide the same services as a normal "designed" logo pack or library for web design. It is not to be able to display all Unicode characters.



## Roadmap



- Add adjustments to some icons.

- Add a separate `composites` list, which contains combined or otherwise not-off-the-unicode-shelf icons.

- More icons!



## List of included icons



Please refer to the index.html file in the repository for a better preview of the icons.



### Arrows



- `u-arrow-left`: ↩

- `u-arrow-right`: ↪



- `circular-arrow-anticlockwise`: ↺

- `circular-arrow-clockwise`: ↻

- `closed-circular-arrow-anticlockwise`: ⟲

- `closed-circular-arrow-clockwise`: ⟳



- `angle-arrow-left`: ↰

- `angle-arrow-right`: ↱



- `double-arrow-left`: ⇐

- `double-arrow-up`: ⇑

- `double-arrow-right`: ⇒

- `double-arrow-down`: ⇓

- `double-arrow-left-right`: ⇔

- `double-arrow-up-down`: ⇕

- `double-arrow-top-left`: ⇖

- `double-arrow-top-right`: ⇗

- `double-arrow-bottom-right`: ⇘

- `double-arrow-bottom-left`: ⇙



- `outline-arrow-left`: ⇦

- `outline-arrow-up`: ⇧

- `outline-arrow-right`: ⇨

- `outline-arrow-down`: ⇩

- `outline-split-arrow-up`: ⇪

- `outline-split-double-arrow-up`: ⇮



- `thin-arrow-top-left-corner`: ⇱

- `thin-arrow-bottom-right-corner`: ⇲



- `thin-outline-arrow-left`: ⇽

- `thin-outline-arrow-right`: ⇾



- `short-fat-arrow-right`: ➧



- `short-arrow-left`: ￩

- `short-arrow-top`: ￪

- `short-arrow-right`: ￫

- `short-arrow-bottom`: ￬



- `arrowhead-right`: ➤



- `arrow-left-right`: ↔

- `arrow-up-down`: ↕



- `arched-arrow-left`: ⃔

- `arched-arrow-right`: ⃕

- `wavy-arrow-left`: ↜

- `wavy-arrow-right`: ↝



- `thin-arrow-left`: ←

- `thin-arrow-up`: ↑

- `thin-arrow-right`: →

- `thin-arrow-down`: ↓

- `thin-arrow-up-down`: ⇅

- `thin-arrow-left-right`: ⇆

- `thin-arrow-top-left`: ↖

- `thin-arrow-top-right`: ↗

- `thin-arrow-bottom-right`: ↘

- `thin-arrow-bottom-left`: ↙



### Angles



- `chevron-left`: ❬

- `chevron-right`: ❭

- `heavy-chevron-left`: ❰

- `heavy-chevron-right`: ❱



- `small-angle-left`: ‹

- `small-angle-right`: ›

- `small-angle-up`: ˆ

- `small-angle-down`: ˇ



- `angle-left`: ᐸ

- `angle-right`: ᐳ



- `wide-angle-up`: ︿

- `wide-angle-down`: ﹀

- `wide-angle-left`: 〈

- `wide-angle-right`: 〉



### Triangles



- `triangles-up-down`: ː



- `triangle-left`: ◄

- `triangle-up`: ▲

- `triangle-right`: ►

- `triangle-down`: ▼



- `outline-triangle-left`: ◁

- `outline-triangle-up`: △

- `outline-triangle-right`: ▷

- `outline-triangle-down`: ▽



- `small-triangle-left`: ◂

- `small-triangle-up`: ▴

- `small-triangle-right`: ▸

- `small-triangle-down`: ▾



- `outline-small-triangle-left`: ◃

- `outline-small-triangle-up`: ▵

- `outline-small-triangle-right`: ▹

- `outline-small-triangle-down`: ▿



- `outline-narrow-triangle-left`: ⊲

- `outline-narrow-triangle-right`: ⊳



### Crosses and checks



- `small-cross`: ˟

- `cross`: ✕

- `thin-cross`: ╳

- `heavy-cross`: ✖

- `handwritten-cross`: ✘



- `checkmark`: ✔

- `check`: ✓

- `check-heavy`: ✔

- `square`: ☐

- `checked-square`: ☑



### Weather



- `sun`: ☀

- `outline-sun`: ☼

- `outline-moon`: ☾

- `cloud`: ☁

- `umbrella`: ☂

- `snowman`: ☃

- `comet`: ☄



### Misc



- `degree`: °

- `middot`: ·

- `bullet`: •

- `shelf`: ˽

- `female`: ♀

- `male`: ♂

- `music`: ♫

- `recycling`: ♻

- `outline-flag`: ⚐

- `flag`: ⚑

- `outline-circle-dot-right`: ⚆

- `circle-dot-right`: ⚈

- `outline-circle-dot-double`: ⚇

- `circle-dot-double`: ⚉

- `atom`: ⚛

- `warning`: ⚠

- `baseball`: ⚾

- `ornament-quote-down`: ❝

- `ornament-quote-up`: ❞

- `search`: ֠

- `infinity`: ∞

- `infinity-vertical`: ଃ

- `circle`: ೦

- `dot-on-line`: ᚽ

- `ellipsis`: …

- `ellipsis-vertical`: ⁝

- `forbidden`: ⃠

- `trademark`: ™

- `copyright`: ©

- `registered`: ®

- `info`: ℹ

- `asterisk`: ∗

- `bacon`: ≈

- `hamburger`: ≡

- `quadruple-hamdurger`: ≣

- `crosshairs`: ⊹

- `star`: ★

- `outline-star`: ☆

- `osx-cmd`: ⌘

- `delete-right`: ⌦

- `delete-left`: ⌫

- `print`: ⎙

- `eject`: ⏏

- `telephone`: ☎

- `outline-telephone`: ☏

- `scissors`: ✁

- `circle-telephone`: ✆

- `airplane`: ✈

- `mail`: ✉

- `heart`: ❤

- `circled-plus`: ⊕

- `circled-minus`: ⊖

- `circled-cross`: ⊗

- `circled-slash`: ⊘

- `circled-equals`: ⊜

- `hand-left`: ☚

- `hand-right`: ☛

- `outline-hand-left`: ☜

- `outline-hand-right`: ☞

- `outline-hand-down`: ☟

- `writing-hand`: ✍

- `pen`: ✎

- `skull-bones`: ☠

- `radiation`: ☢

- `biohazard`: ☣

- `aesculapius-staff`: ⚕

- `peace`: ☮

- `yin-yang`: ☯

- `sad-face`: ☹

- `outline-smiling-face`: ☺

- `smiling-face`: ☻