Baike.dev
All toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
B

beanheads

> 编程语言
Open source

Easily create characters for your projects

1.5K stars0 likes0 views
WebsiteGitHub

About

Easily create characters for your projects

Easily generate avatars for your projects with Bean Heads. https://beanheads.robertbroersma.com ### Try it Navigate to [our online playground](https://beanheads.robertbroersma.com/editor)! ### Getting Started ```shell yarn add beanheads ``` or ```shell npm install beanheads --save ``` then, in your app: ```jsx import { BeanHead } from 'beanheads' const Example = () => ( ) ``` ### Props - [`accessory`](#accessory) - [`body`](#body) - [`circleColor`](#circlecolor) - [`clothing`](#clothing) - [`clothingColor`](#clothingcolor) - [`eyebrows`](#eyebrows) - [`eyes`](#eyes) - [`facialHair`](#facialhair) - [`graphic`](#graphic) - [`hair`](#hair) - [`hairColor`](#haircolor) - [`hat`](#hat) - [`hatColor`](#hatcolor) - [`lashes`](#lashes) - [`lipColor`](#lipcolor) - [`mask`](#mask) - [`faceMask`](#faceMask) - [`mouth`](#mouth) - [`skinTone`](#skinTone) # Reference ## Props ### `accessory` Type of accessory | Type | Required | | ----------------------------------------------------- | -------- | | enum('none', 'roundGlasses', 'tinyGlasses', 'shades') | No | --- ### `body` Type of body | Type | Required | | ------------------------ | -------- | | enum('chest', 'breasts') | No | --- ### `circleColor` The color of the circular background | Type | Required | | ------------ | -------- | | enum('blue') | No | --- ### `clothing` Type of cloth | Type | Required | | ----------------------------------------------------------------- | -------- | | enum('naked', 'shirt', 'dressShirt', 'vneck', 'tankTop', 'dress') | No | --- ### `clothingColor` The color of the clothes | Type | Required | | ---------------------------------------------- | -------- | | enum('white', 'blue', 'black', 'green', 'red') | No | --- ### `eyebrows` Type of eyebrows | Type | Required | | -------------------------------------------------------------- | -------- | | enum('raised', 'leftLowered', 'serious', 'angry', 'concerned') | No | --- ### `eyes` Type of eyes | Type | Required | | ---------------------------------------------------------------------------------------------- | -------- | | enum('normal', 'leftTwitch', 'happy', 'content', 'squint', 'simple', 'dizzy', 'wink', 'heart') | No | --- ### `facialHair` Type of facial hair | Type | Required | | -------------------------------------------------------- | -------- | | enum('none', 'none2', 'none3', 'stubble', 'mediumBeard') | No | --- ### `graphic` Type of graphic over the t-shirts | Type | Required | | ------------------------------------------------------------ | -------- | | enum('none', 'redwood', 'gatsby', 'vue', 'react', 'graphQL') | No | --- ### `hair` Type of hair | Type | Required | | ------------------------------------------------------------------------------- | -------- | | enum('none', 'long', 'bun', 'short', 'pixie', 'balding', 'buzz', 'afro', 'bob') | No | --- ### `hairColor` The color of the hair | Type | Required | | ------------------------------------------------------------------- | -------- | | enum('blonde', 'orange', 'black', 'white', 'brown', 'blue', 'pink') | No | --- ### `hat` Type of hat | Type | Required | | -------------------------------------------------------------------- | -------- | | enum('none', 'none2', 'none3', 'none4', 'none5', 'beanie', 'turban') | No | --- ### `hatColor` The color of the hat | Type | Required | | ---------------------------------------------- | -------- | | enum('white', 'blue', 'black', 'green', 'red') | No | | --- ### `lashes` Show lashes | Type | Required | | --------------------- | -------- | | enum('true', 'false') | No | --- ### `lipColor` The color of the lips | Type | Required | | -------------------------------------------------- | -------- | | enum('red', 'purple', 'pink', 'turqoise', 'green') | No | --- ### `mask` If set to true it displays the avatar in a circle and cuts off everything below it. If set to false, it won't display the circle, and won't clip off any of the avatar. | Type | Required | | ------- | -------- | | boolean | No | --- ### `faceMask` If set to true the avatar will be wearing a face mask | Type | Required | | ------- | -------- | | boolean | No | --- ### `mouth` Type of mouth | Type | Required | | --------------------------------------------------------------------- | -------- | | enum('grin', 'sad', 'openSmile', 'lips', 'open', 'serious', 'tongue') | No | --- ### `skinTone` The color of the skin | Type | Required | | -------------------------------------------------------- | -------- | | enum('light', 'yellow', 'brown', 'dark', 'red', 'black') | No | --- # License I have made Bean Heads icons available for you to incorporate into your products under the MIT License. Feel free to remix and re-share for personal or commercial use. I'd love attribution, but it's not required. The only thing I ask is that you not re-sell these icons.

GitHub Issues· 28 open

View all on GitHub
  • #49

    Invariant Violation: View config getter callback for component `path` must be a function

    Updated Jul 12, 2024
  • #18

    Huge Performance Issues

    Updated Sep 9, 2023
  • #22

    [Request] add rest of the body to simulate a crowd

    Updated Apr 13, 2023
  • #21

    Simple javascript example showing how to export svg and render on screen?

    Updated Oct 14, 2022
  • #35

    [Enhancement] Insert mustache

    Updated Oct 9, 2022

Highlights

  • •accessory
  • •circleColor
  • •clothing
  • •clothingColor
  • •eyebrows
  • •facialHair
  • •hairColor
  • •hatColor
  • •lipColor
  • •faceMask

> Tags

TypeScript

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category编程语言
PricingOpen source

> Related tools

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言