Export Guide

Click the Export button in the left sidebar menu. The export dialog opens as a modal that lets you configure the output directory, select which icon groups to include, and choose output formats and companion files. All settings are remembered between sessions, so once you've configured your preferred export setup, subsequent exports are a single click.

The first step is selecting where to save the exported files. By default, Bobcorn uses your Desktop. Click the folder button next to the path to browse for a different location.

You can choose which icon groups to include in the export. By default, all groups are selected. Uncheck any groups you don't want in the font — for example, you might exclude a "drafts" group that contains work-in-progress icons.

Each group shows its icon count next to its name. The total icon count at the bottom of the list updates in real time as you toggle groups on and off, so you always know exactly how many glyphs the exported font will contain.

Bobcorn can generate five font formats. Choose the ones that match your project's browser-support requirements:

WOFF2 is always included because it is the essential web font format — there is no scenario where you would want a web font export without it. All other formats are opt-in based on your specific requirements.

Beyond the font files themselves, Bobcorn can generate several companion files that make integration and collaboration easier:

CSS (icons.css)

Contains the @font-face declaration and .icon-* CSS classes for every icon in the set. Drop this file into your project and you're ready to use icons with simple class names. See the CSS @font-face guide for details on how the generated CSS works.

JS (icons-symbol.js)

An SVG symbol sprite that registers all icons as inline SVG symbols when the script loads. Use this when you need multi-color icons or SVG-specific features alongside your font icons. See the SVG Symbol guide for usage patterns.

HTML (demo.html)

An interactive preview page showing all exported icons with their names, CSS class names, and Unicode code points. Open it in a browser to browse the full icon set. Useful for designers reviewing the icon library and developers looking up class names during integration.

ICP (project.icp)

Bobcorn's project file. Export this to share your icon project with teammates or as a backup. Opening an ICP file in Bobcorn restores the full project state — all icons, groups, metadata, and settings — exactly as they were when exported.

Enable the ZIP option to bundle all exported files into a single .zip archive. This is useful when sharing the icon font with teammates, uploading to a CDN, or attaching to a design handoff document. The ZIP contains the same directory structure as a loose export — no nesting or reorganization.

Here are three practical presets for common project types:

Modern web project

• WOFF2 (always on) + CSS + HTML demo
• Minimal footprint, covers 97%+ of browsers

Full compatibility project

• WOFF2 + WOFF + CSS + HTML demo
• Covers IE 11+ and all modern browsers

Design system / component library

• WOFF2 + TTF + CSS + JS symbol + HTML demo + ICP
• Fonts for CSS usage, TTF for desktop tools, JS symbols for multi-color variants, ICP for project backup

When all options are enabled, Bobcorn generates the following file structure:

output/
├── MyIcons.woff2        # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactive preview
└── MyIcons.icp          # Project backup

The font family name (e.g., "MyIcons") is derived from your project name in Bobcorn. All generated files use this name as their prefix for consistency.

Once Bobcorn has generated your files, follow these steps to integrate the icon font into your project:

1. Copy font files + CSS to your project's assets or fonts directory
2. Link the CSS in your HTML: <link rel="stylesheet" href="MyIcons.css">
3. Use icons anywhere in your markup: <i class="icon icon-home"></i>
4. Optionally preload the WOFF2 file for faster initial rendering

Here is a complete integration example:

<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Save</button>
</body>

The rel="preload" hint tells the browser to begin downloading the font file before it encounters the @font-face rule in the CSS. This eliminates the delay between CSS parse and font download, resulting in faster first-paint with icons visible. The crossorigin attribute is required for font preloads, even when the font is same-origin.