ContentBlocks v1 Custom Inputs Icons in ContentBlocks

ContentBlocks ships with a lot of icons by default. These cover most use cases and input types that are included in the core, as well as a bunch of icons for different layout configurations.

These icons were designed specifically for ContentBlocks by Jon Wallace Design.

Included Icons

All icons will be shown in the Icons dropdown when adding a field or layout, but in case you want a separate look, here they are:

All these icons are retina-ready too (not on this page), so should look great on your fancy screens as well.

Custom Icons

To load custom icons, simply upload them to the assets/components/contentblocks/img/icons/ directory. The image needs to:

  • be a png file and end in the .png extension
  • be 80x80px in size.
  • have a @2x variety at 160x160px for retina screens, so if you have customicon1.png, you will also need customicon1@2x.png that is twice the size.
  • look pretty.

If you made a wicked custom input that you want to distribute and you need an icon for it, get in touch. We might be able to help with a free icon.

Creating Custom Icons

To aid with creating custom icons, Max Mitchell wrote a shell script that is available on GitHub that will automatically build new icons for you. It will take your input images/icons, and place them on top of the right background and in the right size. Check it out here.

You can also use this PSD to create icons (provided by Sebastian Marinescu).