Custom icon packs in Brix

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!