Skip to content
~4.2 billion default profile pics
CSS JavaScript HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs imagery Jul 17, 2019
gulp style fix Jul 24, 2019
lib/src style fix Jul 24, 2019
test update tests with new dist path Jul 17, 2019
toolkit style fix Jul 24, 2019
.gitignore add new images, clean up readme more Jul 10, 2019
LICENSE.txt update license copyright Jul 31, 2019
package-lock.json add build step for polyfilling object spread syntax Jul 23, 2019
package.json add license to package.json Aug 1, 2019


Version Minzipped Size License: MIT

→ Github


Each of the ~4.2 billion points on Azimuth is unique. Each one has a pronounceable, easily memorized name, something like ~ravmel-ropdyl. Sigils visualize these names – there are as many unique Sigils as there are Azimuth points. sigil-js is a javascript library that converts one of these names into it's corrosponding Sigil.

example images


ES2015 / React

import { sigil, reactRenderer } from 'urbit-sigil-js'

const Sigil = props => {
 return (
       patp: props.patp,
       renderer: reactRenderer,
       size: props.size,
       colors: ['black', 'white'],


const { sigil, stringRenderer } = require('urbit-sigil-js')

const svgString = sigil({
  patp: 'zod',
  renderer: stringRenderer,
  size: 128,
  colors: ['black', 'white'],


SSH: npm install git+ssh://

HTTPS: npm install git+


Param Explanation Type Optional?
patp Any valid urbit @p string No, and can only accept galaxies, stars and planets.
renderer A recursive function that controls the DOM output. See stringRenderer() and reactRenderer() for examples. Both are exported via sigil-js. function Yes. If left undefined, sigil() will return an SVG AST
size Width and height of desired SVG output integer No
colors A background (first value) and foreground color (second value) with which to paint the sigil array like [#4330FC, #FFFFFF] Yes, default is ['#000', '#fff']
margin Outer margin within background in px integer Yes
class CSS class to add to the outer SVG tag string Yes
attributes Adds DOM tag attributes to the outer SVG element object Yes
iconMode Returns only first symbol of a sigil boolean Yes

About the renderer param

As mentioned about, the renderer param expects a recursive function that transform the SVG AST that is generated by sigils.js into DOM elements. Two renders are exported by Sigil.js.


These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.


You'll need Node installed. We use 10.0.0. To install Node on MacOS or Ubuntu, look here. Once you have Node, you'll need to clone this repository.



Then, cd into the repository and run npm install.


Commands Description
gulp or npm run build Build the library from source


npm run test


The toolkit is comprised of helper node scripts, test scripts and a preview webapp. It will remain undocumented for the time being.

Package Dependencies

There are two main dependencies.

And React for the reactRenderer function.


Please read for details on the process for submitting pull requests to us.


  • ~ridlur-figbud


This project is licensed under the MIT License - see the LICENSE.txt file for details


You can’t perform that action at this time.