Source: https://divicake.com/blog/increase-the-height-of-divi-builder-icon-picker-area/

[Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/)

# How To Increase The Height Of The Divi Builder Icon Picker Area

By Divi Cake·30 November 2023·Updated 14 December 2023·3 min read

By default, Divi Builder icon picker area is too short, making it tough to scroll and find what you need.

We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/)

On this page

- [Enhancing The UI Of The Divi Builder: Increasing The Height Of The Icon Picker Field](https://divicake.com#enhancing-the-ui-of-the-divi-builder-increasing-the-height-of-the-icon-picker-field)
- [Default Divi Icon Picker Field Height](https://divicake.com#default-divi-icon-picker-field-height)
- [Pasting The CSS Code Snippet](https://divicake.com#pasting-the-css-code-snippet)
- [Where To Paste The CSS Code](https://divicake.com#where-to-paste-the-css-code)
- [Final result after pasting the CSS code](https://divicake.com#final-result-after-pasting-the-css-code)
- [Conclusion](https://divicake.com#conclusion)

This quick tutorial might seem easy and short, but investing a bit of time to apply it on your website will be worth it. Here, you’ll learn how to extend the height of the [Divi](https://divicake.com/go/divi/) Builder’s icon picker area. We will be sharing a handy [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) snippet with you. This snippet is designed to help you effortlessly increase the height of the Divi blurb and button icon picker area. By making this adjustment, you’ll find it much easier to select the perfect icon for your needs. Let’s explore the steps together to simplify your experience of choosing icons!

## Enhancing The UI Of The Divi Builder: Increasing The Height Of The Icon Picker Field

When you’re aiming for efficiency in website design, it’s frustrating when simple tasks become complicated. In [Divi](https://divicake.com/blog/mastering-divi-for-better-web-design/), the icon picker field is a quick fix that could be better. By default, it’s too short, making it tough to scroll and find what you need.

## Default Divi Icon Picker Field Height

The default size of the Divi Builder’s Icon picker area is too small, which makes scrolling and finding desired icons challenging.

Default Divi Icon Picker Field Height

## Pasting The CSS Code Snippet

You have the power to tweak many aspects of [Divi Builder’s](https://divicake.com/blog/getting-started-with-divi-using-the-divi-builder/) appearance using CSS. By exploring the code and leveraging browser inspection tools, you can make significant changes quite easily. The snippet below provides a simple solution: it’s all you need to increase the height of icon picker areas in your Divi Builder.

.et-db #et-boc .et-l .et-fb-font-icon-list {  min-height: 400px!important;  }

## Where To Paste The CSS Code

Paste this code in your Divi>Theme Options>Custom CSS code box.

You have the power to tweak many aspects of Divi Builder’s appearance using CSS

Pasting the CSS code to the Divi Dashboard

## Final result after pasting the CSS code

And there you have it – a small improvement to enjoy! Feel free to replace the 500px with any other value you prefer. I thought it was a good starting point, but the choice is yours.

With a handy CSS snippet the Divi blurb icon picker height has been increased

Enhanced Divi Builder Icon Picker Height

Read More: [How To Increase The Divi Blurb Content Width](https://divicake.com/blog/how-to-increase-the-divi-blurb-content-width/)

## Conclusion

In wrapping up this tutorial on enhancing the Divi Builder’s icon picker area, we’ve unlocked a simple yet impactful solution. Taking a little time to apply this adjustment to your website is a worthwhile investment, and the benefits are certainly worth it.

By following the steps outlined, you’ve learned how to extend the height of the Divi Builder’s icon picker area using a handy CSS snippet. This small tweak can make a significant difference in your [website design](https://divicake.com/blog/10-free-graphic-design-tools-every-divi-designer-should-know/) workflow, providing you with a more seamless experience when selecting icons for your content.

Efficiency in website design is crucial, and addressing seemingly small issues, such as the default height of the icon picker field in [Divi](https://divicake.com/go/divi/), can lead to a smoother and more enjoyable creative process.

Remember, the provided CSS snippet is your tool for this enhancement. By pasting it into your Divi Theme Options under [Custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/), you’ve personalized your icon picker area to better suit your needs. The final result is a subtle yet effective improvement, allowing you to navigate and choose icons with greater ease.

Feel free to experiment with the snippet further, adjusting the pixel value to your liking. The choice is yours, and the possibilities for customization are at your fingertips. Enjoy the newfound efficiency in your website design journey!

Read More: [How to Rearrange the Divi Blurb Module: Placing the Title Above the Image](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/)

About the author

Written by Divi Cake.

## Submit a comment

Comments are read before they appear. Your email is not published.

Comment

NameEmail

Company website

Submit commentSubmit commentSubmit comment

The comment form needs JavaScript for its spam check.

Thanks. Your comment is waiting for review and will appear here once it is approved.

## Do you need help with …

- [Divi websites](https://divicake.com/divi-website-development/)
- [Divi plugins](https://divicake.com/divi-plugin-development/)
- [Fix a site](https://divicake.com/fix-existing-site/)
- [Beyond Divi](https://divicake.com/beyond-divi/)
- [Technical SEO](https://divicake.com/technical-seo/)
- [SEO content](https://divicake.com/seo-content/)

## Save Annually on Divi

[Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/)

## WordPress Hosting & Tools

[100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/)

## More in Tips & Tricks

[

Divi Condition Options Explained

Tips & Tricks6 min read

### Divi Condition Options Explained

How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state.

3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/)

[

Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module

Tips & Tricks6 min read

### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module

Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones.

26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/)

[

Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately?

Reviews7 min read

### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately?

Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off.

25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)
