Fried egg icon, free SVG and components: glyphfox

Sizes, weights and styles

Every glyphfox icon renders along three axes. The stroke grows a little below 24 px so small icons keep their presence.

Sizes

16 px

20 px

24 px

32 px

48 px

Weights

weight 1

weight 1.5

weight 2

weight 2.5

weight 3

Styles

Outline

Duotone

Solid

sharp corners

Copy the code

Pick a format. Each snippet uses the package entry point for that stack; the props work the same everywhere.

App.jsx

import { FriedEggIcon } from 'glyphfox/react';

<FriedEggIcon />

App.vue

<script setup>
import { FriedEggIcon } from 'glyphfox/vue';
</script>

<template>
  <FriedEggIcon />
</template>

App.svelte

<script>
  import { FriedEggIcon } from 'glyphfox/svelte';
</script>

<FriedEggIcon />

app.component

import { GlyphFoxIcon, provideGlyphFox } from 'glyphfox-angular';

<gf-icon name="fried-egg"></gf-icon>

index.html

<glyph-fox name="fried-egg"></glyph-fox>

index.html

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<glyph-fox name="fried-egg"></glyph-fox>

index.html

<span class="gf-fried-egg" aria-hidden="true"></span>

fried-egg.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="glyphfox glyphfox-fried-egg" aria-hidden="true"><path d="M12 3.95C14.7 3.95 16.05 5.75 17.85 6.2C19.65 6.65 21 8.45 20.55 11.15C20.1 13.85 18.75 14.75 19.2 17C19.65 19.25 17.85 21.05 15.15 21.05C12.9 21.05 12 21.95 9.75 21.95C7.5 21.95 5.7 20.6 4.35 19.25C3 17.9 2.1 16.1 2.55 13.85C3 11.6 3.45 10.25 4.8 8C6.15 5.75 9.3 3.95 12 3.95Z"/><circle cx="11.5" cy="12" r="3.5"/></svg>

data URI

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='glyphfox glyphfox-fried-egg' aria-hidden='true'%3E%3Cpath d='M12 3.95C14.7 3.95 16.05 5.75 17.85 6.2C19.65 6.65 21 8.45 20.55 11.15C20.1 13.85 18.75 14.75 19.2 17C19.65 19.25 17.85 21.05 15.15 21.05C12.9 21.05 12 21.95 9.75 21.95C7.5 21.95 5.7 20.6 4.35 19.25C3 17.9 2.1 16.1 2.55 13.85C3 11.6 3.45 10.25 4.8 8C6.15 5.75 9.3 3.95 12 3.95Z'/%3E%3Ccircle cx='11.5' cy='12' r='3.5'/%3E%3C/svg%3E

index.html

<!-- copy node_modules/glyphfox/dist/sprite.svg to your public folder -->
<svg width="24" height="24" aria-hidden="true">
  <use href="/sprite.svg#gf-fried-egg"></use>
</svg>

index.html

<!-- main.js: import 'glyphfox/runtime'; -->
<i data-glyph="fried-egg"></i>

icon.js

import { renderToString } from 'glyphfox/core';
import iconFriedEgg from 'glyphfox/icons/fried-egg';

const svg = renderToString(iconFriedEgg, { size: 24 });

// or, with every icon registered by name:
// import { toSvg } from 'glyphfox';
// toSvg('fried-egg', { size: 24 });

Details

Name	`fried-egg`
React, Vue and Svelte component	`FriedEggIcon`
Icon data export	`iconFriedEgg`
Categories	food
Tags	egg fried egg breakfast sunny side up
Styles	Outline, Duotone (fill of the closed shapes), Solid
Shapes	2
License	MIT

With a modifier badge

Add a badge in any corner with modifier or the name syntax. The icon is cut around the badge, so the result still passes the icon rules.

fried-egg+check

fried-egg+plus

fried-egg+x

fried-egg+alert

Related icons

toast

Use it in your stack

Guides with the install, the props and the pitfalls for each stack: