All Plugins
CSS.gg Icons
Free
Over 700+ Precise and Detailed UI Icons — provided with well-organized Figma components library.
About
[center][h1][b]700+ Precise and Detailed UI Icons[/b][/h1][/center] Add the 'Icon' element in your Editor, and select the name of the icon, color and size and your good to go! [b]Very easy integration[/b] into any app, this icons will make your app look more clean, beautiful and professional. To get every 700+ icon's names, please visit: [u][color=rgb(0, 102, 204)]https://plugins.datamaticsoftware.com/css_gg_icons[/color][/u] [ml][ul][li indent=0 align=left][b]Demo:[/b] https://plugins.datamaticsoftware.com/css_gg_icons[/li][li indent=0 align=left][b]Documentation:[/b] https://plugins.datamaticsoftware.com/documentation?plugin=css-gg-icons[/li][/ul][/ml]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]In the Design tab, search for the 'CSS.gg Icon' in the Visual Elements list. Drag it into your Editor.[/li][li indent=0 align=left]Define what icon will be display and write it's name (for example 'adidas').[/li][li indent=0 align=left]Set a size for the Icon (for instance 2).[/li][li indent=0 align=left]Choose a color for the Icon.[/li][li indent=0 align=left]Select any option available in the dropdown for the cursor to be displayed on icon hover (for example pointer).[/li][li indent=0 align=left]Go into Workflow and add the Event 'A CSS.gg Icon is clicked' to make the Icon clickable[/li][/ol][/ml]
Full Documentation
This plugin will give you a [b]CSS.gg Icon[/b] as an Element and [b]CSS.gg Icon is clicked[/b] as an Event. You need to add the Element to your Editor and set the Icon Name, Icon Size and Color for the plugin to work. And in the Workflow add the Event 'CSS.gg Icon is clicked' to make the Icon clickable with actions This element contains the following properties to be used:
[ml][ul][li indent=0 align=left][b]Icon Name:[/b] Set the name of the icon that will be displayed. There are over 700+ icons and you can get the full list here: https://css.gg/app[/li][/ul][/ml][quote][color=rgb(136, 136, 136)]Only write the Icon Name, don't add the ''gg" suffix. For example if you want to use the Icon for 'Adidas', simply write 'adidas' instead of 'gg-adidas' in the Icon Name property.[/color][size=1][color=rgb(136, 136, 136)][/color][/size][/quote] [ml][ul][li indent=0 align=left][b]Size:[/b] The general size of the icon. As bigger as the size gets, the element size should also get bigger. [i]Default is 1.[/i][/li][li indent=0 align=left][b]Color:[/b] Color of the Icon.[/li][li indent=0 align=left][b]Cursor:[/b] Select from a dropdown what type of cursor will be shown on hover. For a link-type cursor select pointer. [i]Default is default[/i].[/li][/ul][/ml]