Skip to content

Add icons to your Gravity Forms with custom CSS & Image Choices

We’ve had a great customer reach out for help on how to achieve a new style and layout for Image Choices. We loved the example style so much that we just had to give it a go and make the custom CSS for Gravity Forms, freely available for all our other users!

Add icons to your Gravity Forms with custom CSS & Image Choices

Add icons to your Gravity Forms with custom CSS & Image Choices

The below designs and CSS examples were tested in Gravity Forms version 2.6.6 with the default WordPress 2022 theme installed. These demos only support Gravity Forms 2.6.6+. Depending on the theme you are using, you may get different end results. Some basic further CSS tweaking will likely be required to get the result you want. Using older versions of Gravity Forms will most likely lead to unwanted end results.

You’ll need a copy of Gravity Forms installed, along with our Gravity Forms Image Choices add-on installed. The first step is to download a copy of our exported form, and import it into your Gravity Forms.


Download the demo form

Every demo comes with a packaged form download. All you need to do is download the form JSON file, and import it into your gravity Forms. If you’re already a JetSloth customer and using Image Choices, each demo form export has the CSS already included in the image choices custom CSS settings. So take advantage of that!

Download Form Export

Adding the CSS

Every design has the required CSS listed below. If you’re not already using Image Choices, you can add the custom CSS to your theme in a few ways suggested below:

Make sure you set your image choices theme style to none in the form or field setting first.

/*////////////////////////// Color Variables //////////////////////////*/
:root {
    --theme1: #7245F1;
    --theme1-light: #F0ECFD;
    --theme2: #FFA630;
    --theme2-light: #FFF7EC;
    --theme3: #0076FF;
    --theme3-light: #E4EEF6;
    --theme4: #48D6D2;
    --theme4-light: #EAFFFE;
.image-choices-field {
    --ic-image-background-color: none!important;

/*////////////////////////// Purple Styles //////////////////////////*/
.ic-icon-box .theme1.image-choices-field .image-choices-choice{
.ic-icon-box .theme1.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme1);
.ic-icon-box .theme1.image-choices-field.image-choices-show-labels .image-choices-choice-text {
.ic-icon-box .theme1.image-choices-field .image-choices-choice.image-choices-choice-selected {
/*////////////////////////// Orange Styles //////////////////////////*/
.ic-icon-box .theme2.image-choices-field .image-choices-choice{
.ic-icon-box .theme2.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme2);
.ic-icon-box .theme2.image-choices-field.image-choices-show-labels .image-choices-choice-text {
.ic-icon-box .theme2.image-choices-field .image-choices-choice.image-choices-choice-selected {
/*////////////////////////// Blue Styles //////////////////////////*/
.ic-icon-box .theme3.image-choices-field .image-choices-choice{
.ic-icon-box .theme3.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme3);
.ic-icon-box .theme3.image-choices-field.image-choices-show-labels .image-choices-choice-text {
.ic-icon-box .theme3.image-choices-field .image-choices-choice.image-choices-choice-selected {
/*////////////////////////// Blue Styles //////////////////////////*/
.ic-icon-box .theme4.image-choices-field .image-choices-choice{
.ic-icon-box .theme4.image-choices-field .image-choices-choice:hover {
    border:2px solid var(--theme4);
.ic-icon-box .theme4.image-choices-field.image-choices-show-labels .image-choices-choice-text {
.ic-icon-box .theme4.image-choices-field .image-choices-choice.image-choices-choice-selected {

/*////////////////////////// Default Styles //////////////////////////*/
/*Optional wrapper styles*/
.ic-icon-box {
    background: white;
    border-radius: 10px;
    padding: 50px;
    border: 2px dotted #cbd0d4;
/*Background choice styles*/
.ic-icon-box .image-choices-field .image-choices-choice {
    position: relative;
    padding: 25px;
    border:2px solid  transparent;
    border-radius: 10px;
    transition: all 0.3s;
/*Label choice selected styles*/
.ic-icon-box .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-text  {
    color: white;
/*Text label styles*/
.ic-icon-box .image-choices-field.image-choices-show-labels .image-choices-choice-text {
    display: block;
    font-size: 14px;
    letter-spacing: -0.17px;
    text-align: left;
/*Icon styles*/
.ic-icon-box .image-choices-field .image-choices-choice .image-choices-choice-image-wrap {
    display: block!important;
    background-size: contain;
    width: 25px;
    height: 30px;
    text-align: left;
    position: relative;
    z-index: 2;
    top: 3px;
    left: 11px;
/*Label resets*/
.ic-icon-box .image-choices-field .image-choices-choice label {
    cursor: pointer;
    display: block !important;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: auto!important;
    border: none;
    max-width: unset!important;
/*White box behind icon*/
.ic-icon-box .image-choices-field .image-choices-choice label:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0px;
    background: white;
    border-radius: 10px;
    z-index: 1;
    width: 45px;
    height: 45px;

Editing the colours, images, and text in the design

We’ve made editing and tweaking the CSS in the custom Gravity Forms styles as easy as possible.

Custom Gravity Forms designs with CSS
Update the colour themes in CSS

Changing the custom CSS colors

We’ve added CSS variables to the top of every custom CSS form demo. Simply update the mentioned variables with the HEX color value you’d like to change.

Custom Gravity Forms designs with CSS

Adding class names to your form and fields

You’ll need to add 2 CSS class names to your form. 1 to your form wrapper found in the form settings ic-icon-box, and the final to your field, to add the colours you want to use. I’ve also added the gf_list_3col class to the radio field so it shows up in 3 columns.

Add the ic-icon-box class to your form settings

Add icons to your Gravity Forms with custom CSS & Image Choices
add the ic-icon-box class to your form.

Add gf_list_3col class + the colour scheme you want to use (theme1, theme2, theme3, theme4)

Add icons to your Gravity Forms with custom CSS & Image Choices
add a theme class to your field

Summary & other CSS articles

Be sure to comment, share and send your finished examples on social media, or in the comments below! We’d love to see what you make of these examples!