Hugeicons gallery

1. Take the two files. hgi-stroke-rounded.ttf into assets/fonts/, and app_icons.dart into lib/ — it's the whole set as static const IconData, already generated.
2. Declare the family in pubspec.yaml:
   copy

   flutter:
     fonts:
       - family: HugeiconsStrokeRounded
         fonts:
           - asset: assets/fonts/hgi-stroke-rounded.ttf

3. Use it like any icon. Click a tile above to copy its symbol.
   copy

   Icon(HugeIcons.callRinging01, size: 22, color: Colors.teal);
   
   IconButton(
     onPressed: refresh,
     icon: const Icon(HugeIcons.refresh),
   );

4. The other four styles work differently. Stroke and solid are single-colour, so they can be font glyphs. Twotone, duotone and bulk need two tones — and a glyph is one silhouette in one colour, so those stay SVG and render through a small wrapper:
   copy

   HugeIconSvg('moon-02', style: HugeIconStyle.duotone,
               size: R.sp(22), color: CustomColors.black())
   
   // the wrapper, in full:
   SvgPicture.asset(
     'assets/icons/hugeicons/duotone/moon-02.svg',
     theme: SvgTheme(currentColor: color),   // NOT colorFilter
   );

   Tint with SvgTheme(currentColor:), never ColorFilter.mode(c, srcIn) — that repaints every path one colour and flattens the second tone away. Hugeicons also ships stroke="#141B34" rather than currentColor, so run the SVGs through svg_currentcolor.py once.
   Note these four are Pro: they belong in your app, not in this repo. Only stroke is free.
5. Solar icons are SVG too, and free in every style. Set Copy for to SVG file to download one into assets/icons/solar/bold/, then back on Flutter a click copies the SvgPicture.asset(…) line for it.

Two things that will bite you. Keep every IconData compile-time const — IconData(lookupByName(x)) fails the release build outright. And don't ship a name→icon Map of all 6,228: referencing them all defeats --tree-shake-icons, which otherwise cuts the 3 MB font to about 1.4 KB.

1. Click an icon. Its SVG is copied, exactly as Hugeicons drew it.
2. Paste it in Figma. Click the canvas and press ⌘V (Ctrl+V on Windows). It lands as an editable 24×24 vector, not a picture.
3. Make it yours. Change the colour under Stroke or Fill. Resize it with the Scale tool (K), so the line weight scales with it. Press ⌥⌘K to turn it into a component you can reuse across the file.

Need a whole set? Switch to SVG file, click the icons you want, and drag the downloaded files onto the canvas together.

1. Click an icon. call-ringing-01.svg downloads — the original file, untouched.
2. Drop it where you work. Figma, Sketch and Illustrator take it by drag and drop. In Android Studio use New → Vector Asset → Local file; in Xcode drag it into Assets.xcassets.

1. Click an icon. You get its <svg>, with the colour set to currentColor.
2. Paste it where the icon goes — plain HTML, a PHP, Twig or EJS template, an Angular or Svelte component:

   <button class="call">
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> … </svg>
     Call
   </button>

3. Colour and size it in CSS. The icon takes the text colour around it:
   copy

   .call { color: teal; }
   .call svg { width: 20px; height: 20px; }

1. Click an icon. You get a component — save it as CallRinging01Icon.jsx, or .tsx from the TypeScript choice. There is nothing to install.
2. Use it like any component. Every prop lands on the <svg>:
   copy

   import { CallRinging01Icon } from './icons/CallRinging01Icon';
   
   <CallRinging01Icon width={20} height={20} className="text-teal-600" />

3. Colour comes from CSS. The artwork uses currentColor, so color — or a Tailwind text-… class — paints it. It keeps no state, so in Next.js it works in server and client components alike.

1. Click an icon. You get a single-file component — save it as CallRinging01Icon.vue.
2. Import and use it. class, width and the rest fall through to the <svg>:
   copy

   <script setup>
   import CallRinging01Icon from './icons/CallRinging01Icon.vue'
   </script>
   
   <template>
     <CallRinging01Icon class="icon" width="20" height="20" />
   </template>

3. In Nuxt put the file in components/ and skip the import. Colour follows CSS color.

1. Click an icon. You get a Blade component — save it as resources/views/components/icon/call-ringing-01.blade.php.
2. Use it in any view. The attributes you pass are merged onto the <svg>:
   copy

   <x-icon.call-ringing-01 class="w-5 h-5 text-teal-600" />

3. Plain PHP? Switch to HTML / PHP and paste the <svg> into the template instead.

1. Click an icon. You get it as a string constant — keep them together in one icons.js.
2. Put it in the page from a script, or send it from Node in the HTML you render:
   copy

   import { callRinging01Icon } from './icons.js';
   
   button.innerHTML = callRinging01Icon + ' Call';                  // in the browser
   res.send(`<button>${callRinging01Icon} Call</button>`);  // in Express

3. Using require? Change export const to exports.callRinging01Icon =. Colour follows CSS color.

1. Install the SVG renderer once — without Expo it's npm install react-native-svg:
   copy

   npx expo install react-native-svg

2. Click an icon. You get a component — save it as CallRinging01Icon.js.
3. Use it.
   copy

   import { CallRinging01Icon } from './icons/CallRinging01Icon';
   
   <CallRinging01Icon size={22} color="teal" />

1. Click an icon. Its name is copied — call-ringing-01 — for a search box, a layer name or a ticket.