July 18, 2017

Custom icon packs in Brix

by The Evolve team in Brix, Development, WordPress

This post first appeared on the Brix Builder blog.

Brix comes with more than 2200 icons from several icon sets, but sometimes you may need a specific icon or icon set for your project.

You can easily add your custom icon set in your child theme and make it available in Brix to be used across blocks.

First of all you need to save all your icons as separate SVG files and place all these SVGs in a single folder in your child theme, for example: child-theme/icons. Also, make sure to use the following format when naming your icons: prefix-icon_name.svg.

Then on your child theme functions.php file (if you don’t have one just create it) add the following code:

 * Include a new custom icon font.
 * @param array $fonts
 * @return array
function new_icon_pack( $fonts ) {
    $fonts[ 'custom_icons' ] = array(
        'label' => 'Custom icons',
        'name' => 'custom_icons',
        'path' => get_stylesheet_directory() . '/icons',
        'url' => get_stylesheet_directory_uri() . '/icons',
        'prefix' => 'custom', // This is the prefix you've chosen when naming the SVG files
        'mapping' => array()
    return $fonts;
add_filter( 'brix_get_icon_fonts', 'new_icon_pack' );

That’s it, a new icons pack named “Custom icons” is now available for you to use in your theme!

Subscribe to our newsletter!

Get 10% off your next purchase

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.

This site uses Akismet to reduce spam. Learn how your comment data is processed.