In this tutorial for Thrive Architect we're going to take a quick look at how to edit icons inside of buttons.

First, select your button and inside the Main Options enable the "Add Icon" toggle.

To edit the icon directly you'll want to click on the icon itself within the button. You'll notice within the breadcrumbs of the Thrive Architect editor that you are editing the icon within the button.

Now you can edit what icon you're using (defaults as a credit card), color, size, and other normal editing options.

Editing the Hover State of an Icon

You can change what happens to your button icon when hovering by selecting the hover state. 

hovering over icons in thrive architect buttons

Important Note: You can edit what happens to the icon when you hover over only the icon, or you can edit what happens to the icon when you hover over the button

To edit what happens to the icon when you hover only over the icon itself, first click on the icon then click on the hover state options. 

To edit what happens to the icon when you hover over the button, click on the button first then click on the hover state. Once in the hover state, click on the icon.

You can follow along with this tutorial and see it in action by viewing the video below.

Have any questions about using icons with buttons in Thrive Architect? Feel free to leave a comment below and I'll get right back to you.

Related Posts

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Need Personalized Help?

Schedule a 30 minute discovery call and we'll explore the right solutions for your business.

__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"62516":{"name":"Main Accent","parent":-1}},"gradients":[]},"palettes":[{"name":"Default Palette","value":{"colors":{"62516":{"val":"var(--tcb-skin-color-0)","hsl":{"h":215,"s":0.46,"l":0.01}}},"gradients":[]}}]}__CONFIG_colors_palette__
Book a Call
>