https://github.com/zinggi/elm-hash-icon

A library for creating consistent, good looking, random icons
https://github.com/zinggi/elm-hash-icon

elm hash-functions icons svg svg-icons

Last synced: 8 months ago
JSON representation

A library for creating consistent, good looking, random icons

• Host: GitHub
• URL: https://github.com/zinggi/elm-hash-icon
• Owner: Zinggi
• Created: 2018-03-01T11:14:38.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-02T10:40:59.000Z (over 8 years ago)
• Last Synced: 2025-07-24T00:24:53.285Z (11 months ago)
• Topics: elm, hash-functions, icons, svg, svg-icons
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/Zinggi/elm-hash-icon/latest
• Size: 265 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Hash Icons

![](https://github.com/Zinggi/elm-hash-icon/raw/master/examples/imgs/hashOfElm.svg?sanitize=true)

**[Demo](https://zinggi.github.io/randomDemos/other/elmHashIcon.html)** / [Source](https://github.com/Zinggi/elm-hash-icon/blob/master/examples/Main.elm)

This implements a sort of **visual hash** function.  

E.g, the icons above were generated using `iconsFromString 120 3.0 5 "Elm"`.  

The idea is to create a unique icon for every possible input.  

This can for instance be used as an avatar for anonymous users in a forum.  

It might also be used to quickly confirm if two files are different.  

## Features

From a visual hash function, we want a few different features:

  

  * Every possible value should be **easy to remember**

  * **No** two values should be too easy to **confuse**

  * Every icon should look 'good' or at least **not ugly**

  * There should be a high number of possible icons, such that **collisions** are **rare**

  * These properties should also hold for **colorblind** people

These goals are conflicting, but I think this library (and the idea in general) provides a nice trade-off.

## Collision resistance

Compared to other well known hash functions like SHA-256 (256 bit) or MD5 (128 bits),

this visual hash function has a much much worse collision resistance.

The hash icon provides roughly **20 bits** of entropy, so it shouldn't be used for anything critical.

The trade-off between collision resistance and good looking icons is adjustable with a cut-off ratio.

Color combinations with a contrast ratio below the cut-off ratio are discarded.

To increase the collision resistance, you might want to use multiple icons in a row.

~~E.g. with a ratio of 3.4 a row of 7 icons provides as many bytes as MD5.

Or with a ratio of 8.4 we would need 8 icons, but it would look much nicer.~~

**Warning:** The above is not correct!  

The way I generate multiple icons from one string does not provide the expected collision resistance.  

Turns out it's much more complicated, read [this paper](http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.99.9368).  

**TODO**: switch to a better hash function such that the above becomes true.

(At least for a reasonably small (1-20) number of icons).

## Customize

Want to use another set of colors? Another set of icons?  

**Create a fork!**  

I didn't make these things adjustable, because I thought most people don't want to make any adjustments.  

Also, having a few forks around that take the same idea but with different trade-offs sounds exciting to me.  

If you do end up forking this library, please **let me know** so that I can provide a link here.  

## Bugs

Some icons are chopped off.

The problem has already been noted [here](https://github.com/jystic/elm-font-awesome/issues/1) and is hopefully fixed soon.

## Update Log

**Note**: I will bump the major version every time there are some visual changes.

Even if it would technically not be a major change,

it would break the implicit contract that the same string always hashes to the same icon.

  * 2.0.0 -> Removed brands by default, but they can be enabled if desired.

  * 1.0.0 -> First version

## Prior art

  * Probably the [original "identicon"](https://web.archive.org/web/20080703155519/http://www.docuverse.com/blog/donpark/2007/01/18/visual-security-9-block-ip-identification)

  * Github's version, e.g. as implemented [here](https://github.com/pukkamustard/elm-identicon)

## Credits

Icons from [Font Awesome](https://fontawesome.com/)