✅ Link to the plugin page: https://zeroqode.com/plugin/28-collections-of-ui-user-avatars-plugin-1728461843702x883874569060197000
Demo to preview the plugin:
✅
Live Demo: https://ui-avatars-demo.bubbleapps.io/
Introduction
One plugin that adds randomized UI avatars to your app! Choose from 28 different styles!
SVG avatars format for optimal sharpness.
How to setup
- You can generate the UI avatars by using the "get data from an external API" expression:
- You can find all the collections in the dropdown:
- Choose the collection, configure the parameters:
Plugin Data Calls
Adventurer
Creates an avatar style: Adventurer
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | Flip the avatar horizontally True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. b6e3f4. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Initials
Creates an avatar style: Initials
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Adventurer Neutral
Creates an avatar style: Adventurer Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Avataaars
Creates an avatar style: Avataaars
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Avataaars Neutral
Creates an avatar style: Avataaars Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Big Ears
Creates an avatar style: Big Ears
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Big Ears Neutral
Creates an avatar style: Big Ears Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Big Smile
Creates an avatar style: Big Smile
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Bottts
Creates an avatar style: Bottts
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Bottts Neutral
Creates an avatar style: Bottts Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Croodles Neutral
Creates an avatar style: Croodles Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Croodles
Creates an avatar style: Croodles
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Fun Emoji
Creates an avatar style: Fun Emoji
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Icons
Creates an avatar style: Icons
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Identicon
Creates an avatar style: Identicon
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Lorelei
Creates an avatar style: Lorelei
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Lorelei Neutral
Creates an avatar style: Lorelei Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Micah
Creates an avatar style: Micah
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Miniavs
Creates an avatar style: Miniavs
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Notionists
Creates an avatar style: Notionists
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Notionists Neutral
Creates an avatar style: Notionists Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Open Peeps
Creates an avatar style: Open Peeps
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Personas
Creates an avatar style: Personas
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Pixel Art
Creates an avatar style: Pixel Art
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Pixel Art Neutral
Creates an avatar style: Pixel Art Neutral
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Rings
Creates an avatar style: Rings
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Shapes
Creates an avatar style: Shapes
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
Return Values:
Return type: image
Thumbs
Creates an avatar style: Thumbs
Name | Description | Type |
Seed | The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based. | Text |
Flip | True/false | Text |
Rotate | Value between 0-360 | Text |
Scale | Zoom the image. Default is 100 | Text |
BackgroundColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. Leave blank for a transparent BG. | Text |
ShapeColor | Background color. A HEX code without the #, e.g. d81b60. You can add multiple colors separated by a comma and we will choose one randomly. | Text |
Return Values:
Return type: image
Workflow example
In order to save the picture for a User, use "get data from an external API” expression in the Current User’s field:
Changelogs
Update 09.10.24 - Version 1.1.0
- Acquired by Zeroqode.
Update 11.01.24 - Version 1.0.1
- Patch.
Update 09.01.24 - Version 1.0.0
- Launch.
Update 06.01.24 - Version 0.0.1
- Pre-launch.