Create Custom Icons Online - Free SVG & PNG Icon Maker
Generate custom icons for free with our online icon maker. Create stunning SVG and PNG icons for apps, websites, and favicons in seconds.
Finding the right icon used to mean opening five different library websites, each with its own search bar and download workflow. This icon generator brings 28,696 open-source icons from Lucide, Phosphor, Tabler, Remix, and Bootstrap into a single interface. Type a keyword and results appear instantly. Click any icon to customize its size, color, and stroke width before copying the SVG code, downloading as SVG, or exporting as PNG. Six style variants are available: outline, thin, light, bold, filled, and duotone. Not every library supports every variant, but the filter chips at the top make it clear which styles have how many icons. Category tabs narrow results further, covering arrows, navigation, media, development, finance, and two dozen other groups. The entire tool runs in your browser with no account required, no watermarks on downloads, and no usage limits. Every icon carries the same open-source license as its parent library, so commercial projects are covered. Below you will find a complete guide covering how the tool works, which libraries are included, how to get the most from each style variant, and practical tips for using SVG icons in production code.
Table of Contents
How to Use the Free Icon Generator: Step by Step
Search for Icons by Keyword
Start by typing a keyword into the search bar at the top of the page. The search matches against icon names, display names, and tags, so typing arrow returns every icon that has arrow in its name or is tagged with that word. Results load with a short debounce so the API is not hammered on every keystroke. You can type general terms like home, settings, or user, or you can be specific and type arrow-down-left to find an exact icon. The result count updates in real time, showing how many icons match your current filters.
Filter by Style Variant
Below the search bar, style filter chips let you narrow results to a specific visual weight. The six options are Outline, Thin, Light, Bold, Filled, and Duotone. Each chip shows the count of icons available in that style, so you know before clicking whether the variant you want has enough coverage. Outline is the most populated style with icons from all five libraries. Duotone and Thin are provided by Phosphor, which is currently the only library in the generator that supports those weights. Clicking a style chip toggles it on or off, and the icon grid refreshes immediately.
Filter by Library Source
Next to the style chips, library filter chips let you restrict results to icons from a single source: Lucide, Phosphor, Tabler, Remix, or Bootstrap. This is useful when you are already using one library in your project and want to maintain visual consistency rather than mixing icons from different designers. Each library chip also shows its total icon count. You can combine a library filter with a style filter to see, for example, only Phosphor icons in the bold variant.
Browse by Category
Category tabs run horizontally below the filter chips. Categories include Arrows, Navigation, Media, Development, Finance, Health, Social, Weather, and about twenty more. Clicking a category scrolls the icon grid to show only icons in that group. The count next to each category name tells you how many icons it contains. Categories are particularly helpful when you are exploring ideas rather than searching for a specific icon name.
Customize Size, Color, and Stroke Width
Clicking any icon in the grid opens the detail panel on the right. This panel has three customization controls. The size slider ranges from 12 pixels to 128 pixels and updates the preview in real time. The color picker offers ten preset grayscale shades plus a custom color input for any hex value. The stroke width slider, which appears for stroke-based icons like those from Lucide, lets you adjust line thickness from 0.5 to 3 pixels. These adjustments are reflected in the SVG code, the SVG download, and the PNG export.
Copy SVG Code, Download SVG, or Export PNG
Three action buttons sit below the customization controls. Copy SVG Code places the full SVG markup on your clipboard, ready to paste into an HTML file, a React component, or a design tool. Download SVG saves the customized icon as an SVG file with your chosen size, color, and stroke settings baked in. Export PNG renders the icon at four times the display size for crisp results and saves it as a PNG file. A fourth button copies a React component snippet for Lucide icons, importing the component directly from the lucide-react package.
Save Favorites for Later
The heart icon on each detail panel lets you add icons to a favorites list stored in your browser local storage. Switching to the Favorites tab shows only your saved icons. This is useful when you are curating a set of icons for a project and want to compare options side by side before committing. Favorites persist across sessions on the same browser and device.
Icon Libraries Included: What Makes Each One Different
Lucide Icons: 8,172 Outlines Built for Developers
Lucide is a community-driven fork of Feather Icons that has grown far beyond its predecessor. Every icon is drawn on a 24-by-24 pixel grid with a 2-pixel stroke, following strict consistency rules for corner radius, stroke alignment, and visual weight. Lucide icons render as stroke-based SVGs, which means they scale cleanly at any size and respond to stroke-width and color changes in real time. The library is particularly strong in UI and navigation categories, with comprehensive coverage of arrows, form controls, media controls, and status indicators. Lucide also provides first-class React components through the lucide-react package, and the icon generator produces the corresponding import snippet when you copy React code for a Lucide icon. If your project already uses Lucide, filtering by that library keeps your icon set consistent without introducing visual noise from other design systems.
Phosphor Icons: 9,072 Icons Across Six Style Variants
Phosphor is the most versatile library in the generator because it is the only one that offers all six style variants: outline, thin, light, bold, filled, and duotone. The design language is friendly and slightly rounded, making it a good fit for consumer-facing products that want a softer aesthetic than Lucide provides. Phosphor icons are drawn on a 256-by-256 pixel grid and rendered as fill-based SVGs, which means they use the fill attribute rather than stroke. This has two practical implications. First, the stroke-width slider does not apply to Phosphor icons in the generator. Second, color changes apply through the CSS color property with fill set to currentColor, which integrates naturally with icon font patterns. The duotone variant is unique to Phosphor and uses a secondary opacity layer to create a two-tone effect, giving icons a dimensional quality that works well in dashboards and data-heavy interfaces.
Tabler Icons: 6,146 Icons with Outline and Filled Styles
Tabler Icons started as a companion set for the Tabler admin dashboard template and has since become a standalone library popular with developers building internal tools and back-office interfaces. The design is clean and geometric, sitting somewhere between Lucide's minimalism and Phosphor's friendliness. Tabler provides two style variants: outline and filled. The outline style uses the same 2-pixel stroke convention as Lucide, while the filled style uses solid shapes. Tabler is particularly well-represented in the development, finance, and e-commerce categories, making it a solid choice for SaaS dashboards, analytics platforms, and admin panels where those icon groups see heavy use.
Remix Icon: 3,228 Icons with Outline and Filled Styles
Remix Icon is designed by the team behind Remix Design, a Chinese design system. The library takes a systematic approach, organizing icons into categories like Building, Business, Communication, Design, Development, Finance, Health, and more. Each icon comes in outline and filled variants. The design language is compact and space-efficient, which makes Remix icons a good fit for dense UIs where icons need to be readable at small sizes. The library also includes a number of culturally specific icons (such as CNY currency symbols and specific building types) that are not commonly found in Western-focused icon sets.
Bootstrap Icons: 2,078 Icons with Outline and Filled Styles
Bootstrap Icons is the official icon set for the Bootstrap CSS framework. It covers the core set of icons that Bootstrap users need most: navigation, UI controls, alerts, forms, and social media logos. The library provides outline and filled variants. Because the design follows Bootstrap's visual conventions, these icons feel immediately familiar to anyone who has worked with the framework. They are a practical default choice for projects already using Bootstrap, and they fill gaps in categories like social media and branding that other open-source libraries sometimes overlook.
Comparing Icon Libraries: Which One Should You Use
Style Variant Coverage
If your design system calls for a single icon in multiple weights (for example, outline for inactive states and filled for active states), Phosphor is the only library that natively supports all six variants. Lucide focuses exclusively on outline style but covers it comprehensively. Tabler, Remix, and Bootstrap each offer outline and filled, which covers the most common pairing. If you need thin, light, or duotone variants, Phosphor is your only option in this generator. Mixing libraries is possible, but it requires visual QA to ensure that icons from different libraries look cohesive at the same size and color.
Rendering: Stroke vs Fill and Why It Matters
Stroke-based icons (Lucide, and the outline variants of Tabler) define shapes using the stroke attribute, which means you can change line thickness with the stroke-width slider in this generator. Fill-based icons (Phosphor, Remix, Bootstrap, and all filled variants) define shapes using the fill attribute, so they respond to color changes but not to stroke-width adjustments. In practice, this means stroke icons are more flexible for customization but may look thinner at small sizes. Fill icons have more visual presence at small sizes but offer fewer tuning options. Your choice should match the level of control your design system requires.
Design Philosophy and Visual Tone
Lucide leans minimal and technical. Phosphor leans friendly and approachable. Tabler sits in the middle with a geometric precision that works well in data-heavy interfaces. Remix is compact and systematic, good for dense layouts. Bootstrap is utilitarian and familiar, good for projects already in that ecosystem. When all five libraries have an icon for the same concept (say, a home icon), the visual differences are noticeable. Pick the library that matches your product's personality and stick with it for consistency.
Icon Library Comparison
| Library | Total Icons | Style Variants | Render Type | Grid Size | Best For |
|---|---|---|---|---|---|
| Lucide | 8,172 | Outline | Stroke | 24x24 | Technical UIs, React projects |
| Phosphor | 9,072 | 6 (Outline, Thin, Light, Bold, Filled, Duotone) | Fill | 256x256 | Consumer apps, multi-weight design systems |
| Tabler | 6,146 | 2 (Outline, Filled) | Stroke / Fill | 24x24 | SaaS dashboards, admin panels |
| Remix | 3,228 | 2 (Outline, Filled) | Fill | 24x24 | Dense UIs, compact layouts |
| Bootstrap | 2,078 | 2 (Outline, Filled) | Fill | 16x16 / 24x24 | Bootstrap projects, social media icons |
Who Uses This Icon Generator and Why
Frontend Developers Building React Applications
React developers often need SVG icons as inline components rather than image files. The generator provides two paths for this workflow. For Lucide icons, the Copy React Code button generates an import statement and JSX snippet using the lucide-react package, which supports tree-shaking so only the icons you import get bundled. For icons from other libraries, the Copy SVG Code button gives you the raw SVG markup that you can paste into a custom component. The size and color props in the generated code match whatever you set in the customizer, so there is no manual adjustment needed after pasting.
UI Designers Creating Wireframes and Prototypes
Designers working in Figma, Sketch, or Adobe XD need icon assets that match their design system's specifications before they go into production code. The generator lets you set the exact pixel size and hex color you need, then download the icon as a PNG at four times the display resolution. This gives you a crisp asset that scales well in presentation decks and high-fidelity mockups. The SVG download option is useful when you want to import icons as vector layers that can be further edited inside the design tool.
Content Creators Building Presentations and Documents
Not everyone using an icon generator is writing code. Content creators building slide decks, reports, or documentation often need simple icons to illustrate concepts without hiring a graphic designer. The generator's category filters make it easy to find the right visual metaphor, and the PNG download at 4x resolution ensures the icon looks sharp when projected or printed. The grayscale color presets are particularly useful for corporate presentations that need to stay within brand guidelines.
Indie Developers Shipping Side Projects Quickly
Solo developers building MVPs and side projects rarely have the budget for custom icon design. Open-source icon libraries fill this gap, but navigating multiple library websites to find the right icon is slow. This generator consolidates five libraries into one search interface, which means you can find, customize, and drop an icon into your project in under ten seconds. No signup wall, no attribution requirement for most icons, and no daily download limit.
Design System Maintainers Ensuring Consistency
Teams maintaining a design system need to audit their icon set regularly to ensure visual consistency, adequate coverage, and proper usage of style variants. The generator's library filter makes it easy to browse all icons from a single source, while the style filter shows which variants are available. This is useful when you are deciding whether to add filled variants to a system that currently only uses outline icons, or when you need to verify that a specific category (like accessibility or accessibility) has enough coverage before committing to a library.
Best Practices for Using SVG Icons in Production
Use Inline SVG Instead of Image Tags for Better Control
When you copy SVG code from the generator and paste it directly into your HTML or JSX, the icon becomes part of the document tree. This means you can style it with CSS, animate it with transitions, and target it with JavaScript without any cross-origin restrictions. Image tags, by contrast, load the icon as an external resource that cannot inherit color from its parent element. Inline SVG also eliminates an HTTP request, which improves page load performance when you have many icons on a single page.
Set fill or stroke to currentColor for Theme Integration
The SVG code generated by this tool uses the color you pick in the customizer. For production code, you should replace that hardcoded color value with currentColor. This CSS keyword tells the browser to inherit the text color of the parent element, which means your icons automatically adapt to light and dark themes, hover states, and active states without any additional CSS rules. Every icon from this generator works with currentColor because the SVGs use either fill or stroke, both of which support it.
Optimize SVG Markup Before Shipping
The SVG code from the generator is clean, but it may include default attributes that your build process can strip out. Tools like SVGR (which converts SVGs to React components) and svg-sprite (which combines multiple SVGs into a single sprite sheet) can reduce file size and improve rendering performance. If you are using Next.js, the @svgr/webpack loader handles this automatically. For other frameworks, add an SVGO step to your build pipeline to remove editor metadata, default values, and redundant paths.
Add Accessible Labels to Decorative and Functional Icons
Screen readers interpret SVG elements differently depending on how they are labeled. If an icon is purely decorative (for example, a checkmark next to a completed task), add aria-hidden="true" to the SVG tag so the screen reader skips it. If the icon conveys meaning on its own (for example, a trash can that acts as a delete button), add role="img" and aria-label="Delete" to the SVG tag. The icon generator does not add these attributes automatically because the correct label depends on context, but you should always add them before shipping.
Choose the Right Style Variant for Your Context
Outline icons work best for navigation items, buttons, and toolbar actions where the icon needs to be subtle and not compete with content. Filled icons have more visual weight and draw attention, making them better for active states, important call-to-action buttons, and status indicators. Thin and light variants suit minimal or luxury-brand interfaces where every pixel of visual weight counts. Bold icons work in contexts where icons need to be legible at very small sizes, such as mobile navigation bars. Duotone icons add visual interest without the heaviness of a fully filled icon, making them a good fit for dashboard cards and feature highlights.
Maintain Consistent Sizing Across Your Icon Set
Icons from different libraries may have slightly different optical sizes even when their viewBox dimensions match. A Lucide icon on a 24x24 grid and a Phosphor icon on a 256x256 grid both scale to the same CSS size, but the visual weight can differ because Phosphor's design language uses slightly larger shapes within the grid. If you are mixing libraries, test icons side by side at your target size (16px, 20px, or 24px are the most common) and adjust the size of individual icons as needed to maintain optical consistency.
Understanding Icon Style Variants: Outline, Thin, Light, Bold, Filled, Duotone
Outline: The Default for Most Interfaces
Outline icons use stroked paths to define shapes. They are the most common variant because they are legible at small sizes, visually lightweight, and easy to customize with stroke-width and color changes. Lucide, Phosphor, Tabler, Remix, and Bootstrap all provide outline variants, making it the most interoperable style across libraries. In this generator, outline icons from Lucide and Tabler respond to the stroke-width slider, while outline icons from Phosphor, Remix, and Bootstrap are rendered as filled shapes that visually appear outlined but technically use the fill attribute.
Thin and Light: For Minimal and Luxury Interfaces
Thin and light variants reduce the visual weight of icons below the standard outline weight. Phosphor is the only library in this generator that offers these variants. Thin icons use a hairline stroke that works well in large display sizes (32px and above) where the reduced weight creates an elegant, understated look. Light icons are slightly heavier than thin but lighter than outline, making them suitable for body-text-adjacent elements where the icon should not dominate. Both variants lose legibility below 16px, so they are not recommended for mobile navigation or dense toolbars.
Bold: When Icons Need to Stand Out
Bold icons use thicker strokes or larger filled areas than the standard outline. Phosphor's bold variant increases the stroke weight, which improves legibility at very small sizes (12px to 16px) and on low-resolution displays. Bold icons also work well as attention markers, for example in notification badges or error states where the icon needs to be immediately noticeable. The tradeoff is that bold icons take up more visual space and can feel heavy if overused in a minimalist layout.
Filled: Solid Shapes for Active States and Emphasis
Filled icons use solid shapes without any internal gaps, giving them the highest visual weight of any variant. They are commonly used for active navigation items (where the filled version of an icon indicates the current page), for status indicators (a filled circle for online, an outlined circle for offline), and for important actions that need to draw the eye. Tabler, Remix, Bootstrap, and Phosphor all provide filled variants. When pairing outline and filled icons, use the same library for both to ensure the shapes are identical, just with different fill treatments.
Duotone: Two-Tone Icons for Visual Depth
Duotone icons are unique to Phosphor in this generator. They use two layers: a primary shape at full opacity and a secondary shape at reduced opacity, creating a two-tone effect. This adds visual depth without the heaviness of a fully filled icon, making duotone icons popular in dashboard cards, feature boxes, and marketing pages where icons serve as decorative illustrations rather than purely functional indicators. The SVG output for duotone icons includes an opacity attribute on the secondary layer, which you can adjust in your CSS to fine-tune the effect.
Tips for Getting the Most Out of This Icon Generator
Use Broad Keywords First, Then Narrow Down
Starting with a specific search term like arrow-down-left may return zero results if the exact name does not exist in the database. Instead, start with a broad term like arrow and then use the style and library filters to narrow the results. This approach also helps you discover related icons you might not have considered, such as arrow-down-circle or arrow-down-to-line, which serve the same general purpose with slightly different visual treatments.
Check Multiple Libraries for the Same Concept
The same concept is often represented differently across libraries. A home icon in Lucide looks different from a home icon in Phosphor, which looks different from the one in Bootstrap. If the first result does not match your visual direction, toggle the library filter to see how other designers approached the same concept. This is especially useful for abstract concepts like settings, security, or analytics, where the metaphor varies significantly between libraries.
Download at 4x Resolution for Retina Displays
The PNG export in this generator renders the icon at four times the display size. If you set the icon size to 24px, the exported PNG will be 96x96 pixels. This ensures the icon looks crisp on high-DPI (Retina) displays, which have a 2x or 3x pixel ratio. If you need an even higher resolution, increase the size slider before exporting. The SVG download, by contrast, is resolution-independent and will look crisp at any size, so prefer SVG for web use and PNG only when the target platform does not support SVG.
Copy React Code for Lucide Icons Instead of Raw SVG
If you are using Lucide in a React project, the Copy React Code button generates an import statement that references the lucide-react package. This is preferable to pasting raw SVG because the package supports tree-shaking (only the icons you import get included in the bundle) and provides props for size, color, and strokeWidth. The raw SVG approach works fine for other libraries or for non-React projects, but for Lucide in React, the component approach is more maintainable.
Use the Favorites Tab to Build Icon Sets
When you are curating a set of icons for a project, use the heart button to save candidates to your favorites list. Then switch to the Favorites tab to see all your saved icons in one place. This makes it easy to compare icons side by side, ensure visual consistency, and avoid downloading duplicates. Favorites are stored in your browser, so they persist across sessions as long as you use the same browser on the same device.
Icon Categories and Coverage: What You Will Find
Icon Categories Available in the Generator
| Category | Icon Count | Example Icons |
|---|---|---|
| Arrows | 2,011 | arrow-up, arrow-down-left, circle-arrow-right, move-diagonal |
| UI Elements | 1,800+ | button, toggle-left, checkbox, slider, dropdown |
| Navigation | 1,400+ | home, menu, breadcrumb, sidebar, pagination |
| Communication | 1,200+ | mail, chat, phone, message-circle, send |
| Media | 1,100+ | play, pause, camera, image, music, volume |
| Development | 1,000+ | code, terminal, git-branch, bug, database |
| Design | 900+ | palette, pen-tool, layout, grid, crop |
| Files | 800+ | file, file-text, folder, upload, download |
| Status | 700+ | check, x, alert-triangle, info, loading |
| Finance | 600+ | dollar-sign, credit-card, chart-bar, wallet |
| Security | 500+ | lock, shield, key, eye-off, fingerprint |
| People | 500+ | user, users, user-plus, avatar, contact |
| Devices | 400+ | monitor, smartphone, tablet, laptop, watch |
| E-Commerce | 400+ | shopping-cart, store, tag, receipt, package |
| Weather | 300+ | sun, cloud, rain, snow, wind |
| Education | 300+ | book, graduation-cap, school, pencil, notebook |
| Health | 300+ | heart-pulse, stethoscope, pill, hospital, syringe |
| Time | 300+ | clock, calendar, timer, hourglass, stopwatch |
| Maps & Location | 300+ | map-pin, globe, navigation, compass, radar |
| Social | 250+ | share, thumbs-up, comment, heart, star |
| Food & Drink | 200+ | utensils, coffee, pizza, wine, cake |
| Transport | 200+ | car, bus, plane, bicycle, train |
| Gaming | 150+ | gamepad, dice, trophy, sword, joystick |
| Nature | 150+ | tree, leaf, flower, mountain, waves |
| Business | 150+ | briefcase, presentation, handshake, chart-line |
| Buildings | 100+ | building, warehouse, landmark, church, store |
Common Mistakes When Using SVG Icons and How to Avoid Them
Mixing Icon Libraries Without Visual QA
Dropping icons from Lucide, Phosphor, and Bootstrap into the same interface without comparing them side by side is a fast way to create visual inconsistency. Each library has a different corner radius, stroke weight, and internal padding. A home icon from Lucide and a home icon from Phosphor placed next to each other will look like they belong to different design systems, because they do. If you must mix libraries, do it intentionally for a specific reason (such as using Phosphor for duotone icons and Lucide for everything else) and test the combination at every size you plan to use.
Using PNG When SVG Would Work Better
PNG icons are raster images that lose quality when scaled up, while SVG icons are vector images that remain sharp at any size. The only situations where PNG is the better choice are email templates (which have inconsistent SVG support), legacy platforms that do not support SVG, and small icon sizes (below 12px) where the rendering difference is negligible. For everything else, especially responsive web applications, SVG is the right choice. This generator provides both formats, but you should default to SVG unless you have a specific reason not to.
Hardcoding Colors Instead of Using currentColor
When you copy SVG code from the generator, the fill or stroke attribute is set to the color you chose in the customizer. In production, this hardcoded color prevents the icon from responding to theme changes, hover states, or parent element colors. Always replace the hardcoded hex value with currentColor before committing the code. This single change makes your icons theme-aware and reduces the amount of CSS you need to write for state changes.
Ignoring viewBox Differences Between Libraries
Lucide, Tabler, and Remix use a 24x24 viewBox, while Phosphor uses a 256x256 viewBox. When you set both to the same CSS width and height, the browser scales them identically. However, the internal proportions of the icon shapes differ because Phosphor's larger grid allows for finer detail. If you are placing a Phosphor icon next to a Lucide icon at 16px, the Phosphor icon may appear slightly smaller or have different padding. Test mixed-library layouts at your actual target sizes before finalizing the design.
Forgetting Accessibility Attributes
SVG elements without ARIA attributes are treated as images by screen readers, and without an accessible name, the screen reader will either skip the icon or announce the file name, neither of which is helpful. Always add aria-hidden="true" for decorative icons and role="img" with aria-label for meaningful icons. This is not optional for production code, especially if your product needs to meet WCAG accessibility standards.
How Open Source Icon Libraries Evolved: A Brief History
From Icon Fonts to SVG: The Shift That Changed Everything
Before SVG icons became the standard, designers used icon fonts like Font Awesome and Material Icons. Icon fonts had several problems: they loaded as a single large file (even if you only used three icons), they rendered inconsistently across operating systems, and they were inaccessible to screen readers because the icons were encoded as characters in a custom typeface. The shift to inline SVG, which began around 2015 and accelerated through 2018, solved all three problems. SVG icons can be loaded individually, they render consistently across platforms, and they can be given accessible labels through ARIA attributes. Every library in this generator was built for the SVG era, which is why none of them ship as icon fonts.
Feather to Lucide: Community-Driven Sustainability
Feather Icons, created by Cole Bemis in 2016, was one of the first icon libraries designed specifically for SVG-first workflows. Its minimal stroke style became hugely popular, but Bemis eventually stopped maintaining it. Lucide was created as a community-driven fork that continued adding icons and fixing issues. This pattern of community forking to sustain a popular project has become common in open source. Lucide now has over 8,000 icons and an active contributor base, which is why it remains the go-to outline library for many developers.
Phosphor and the Multi-Weight Revolution
When Phosphor launched in 2020, it was one of the first libraries to offer six weight variants for every icon. This was a significant departure from the single-weight approach of Feather, Lucide, and Heroicons. The multi-weight model recognizes that modern design systems need icons at different visual weights for different contexts: thin for decorative elements, bold for small sizes, filled for active states. Phosphor's approach has since influenced other libraries, and the demand for multi-weight icon sets continues to grow as design systems mature.
Tabler, Remix, and Bootstrap: Purpose-Built Libraries
Tabler Icons grew out of the Tabler admin dashboard template, which explains its strength in development and finance categories. Remix Icon was created to support a comprehensive design system, which is why it covers an unusually wide range of categories. Bootstrap Icons serves the Bootstrap ecosystem, providing the icons that Bootstrap users need most. Each of these libraries was built to serve a specific community first, then expanded to a broader audience. This purpose-driven origin means each library has deep coverage in its core domain, which is why the generator includes all five rather than picking just one.