# ellipse icon

Ellipse. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/ellipse

- Category: Shapes
- Use it for: ellipse shape, oval, ellipse, ellipse tool
- Tags: ellipse, oval, shape, geometry, ellipse-tool
- Component name: EllipseIcon
- Added: 2026-10-16

## Alternatives

- `circle`: a perfect circle (circle)

## Also fits

- circle: an ellipse or the ellipse tool of a drawing app (ellipse-shape)

## Files

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it.

- line-round: https://gentleface.com/svg/line-round/16/ellipse.svg · PNG https://gentleface.com/png/line-round/16/ellipse.png · https://gentleface.com/png/line-round/32/ellipse.png · https://gentleface.com/png/line-round/48/ellipse.png
- line-soft: https://gentleface.com/svg/line-soft/16/ellipse.svg · PNG https://gentleface.com/png/line-soft/16/ellipse.png · https://gentleface.com/png/line-soft/32/ellipse.png · https://gentleface.com/png/line-soft/48/ellipse.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/ellipse.svg · PNG https://gentleface.com/png/line-sharp/16/ellipse.png · https://gentleface.com/png/line-sharp/32/ellipse.png · https://gentleface.com/png/line-sharp/48/ellipse.png
- solid-round: https://gentleface.com/svg/solid-round/16/ellipse.svg · PNG https://gentleface.com/png/solid-round/16/ellipse.png · https://gentleface.com/png/solid-round/32/ellipse.png · https://gentleface.com/png/solid-round/48/ellipse.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/ellipse.svg · PNG https://gentleface.com/png/solid-soft/16/ellipse.png · https://gentleface.com/png/solid-soft/32/ellipse.png · https://gentleface.com/png/solid-soft/48/ellipse.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/ellipse.svg · PNG https://gentleface.com/png/solid-sharp/16/ellipse.png · https://gentleface.com/png/solid-sharp/32/ellipse.png · https://gentleface.com/png/solid-sharp/48/ellipse.png

The SVG of every style: https://gentleface.com/icons/ellipse.json (`svg`).

## Code (line-round)

The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z"/></svg>
```

### React

```tsx
// Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse
import type { SVGProps } from 'react';

export function EllipseIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse -->
<script>
  let props = $props();
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
  <path d="M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/ellipse.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse. Takes the text color. */
.icon-ellipse {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#ellipse"/></svg>
```

### SwiftUI

```swift
// Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse
import SwiftUI

struct EllipseIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 3.167, y: 5.085))
        p.addCurve(to: CGPoint(x: 5.503, y: 4.257), control1: CGPoint(x: 3.843, y: 4.721), control2: CGPoint(x: 4.622, y: 4.445))
        p.addCurve(to: CGPoint(x: 8, y: 4), control1: CGPoint(x: 6.306, y: 4.086), control2: CGPoint(x: 7.138, y: 4))
        p.addCurve(to: CGPoint(x: 10.497, y: 4.257), control1: CGPoint(x: 8.862, y: 4), control2: CGPoint(x: 9.694, y: 4.086))
        p.addCurve(to: CGPoint(x: 12.833, y: 5.085), control1: CGPoint(x: 11.378, y: 4.445), control2: CGPoint(x: 12.157, y: 4.721))
        p.addCurve(to: CGPoint(x: 14.446, y: 6.415), control1: CGPoint(x: 13.534, y: 5.462), control2: CGPoint(x: 14.072, y: 5.906))
        p.addCurve(to: CGPoint(x: 15, y: 8), control1: CGPoint(x: 14.815, y: 6.917), control2: CGPoint(x: 15, y: 7.446))
        p.addCurve(to: CGPoint(x: 14.446, y: 9.585), control1: CGPoint(x: 15, y: 8.554), control2: CGPoint(x: 14.815, y: 9.083))
        p.addCurve(to: CGPoint(x: 12.833, y: 10.915), control1: CGPoint(x: 14.072, y: 10.094), control2: CGPoint(x: 13.534, y: 10.538))
        p.addCurve(to: CGPoint(x: 10.497, y: 11.743), control1: CGPoint(x: 12.157, y: 11.279), control2: CGPoint(x: 11.378, y: 11.555))
        p.addCurve(to: CGPoint(x: 8, y: 12), control1: CGPoint(x: 9.694, y: 11.914), control2: CGPoint(x: 8.862, y: 12))
        p.addCurve(to: CGPoint(x: 5.503, y: 11.743), control1: CGPoint(x: 7.138, y: 12), control2: CGPoint(x: 6.306, y: 11.914))
        p.addCurve(to: CGPoint(x: 3.167, y: 10.915), control1: CGPoint(x: 4.622, y: 11.555), control2: CGPoint(x: 3.843, y: 11.279))
        p.addCurve(to: CGPoint(x: 1.554, y: 9.585), control1: CGPoint(x: 2.466, y: 10.538), control2: CGPoint(x: 1.928, y: 10.094))
        p.addCurve(to: CGPoint(x: 1, y: 8), control1: CGPoint(x: 1.185, y: 9.083), control2: CGPoint(x: 1, y: 8.554))
        p.addCurve(to: CGPoint(x: 1.554, y: 6.415), control1: CGPoint(x: 1, y: 7.446), control2: CGPoint(x: 1.185, y: 6.917))
        p.addCurve(to: CGPoint(x: 3.167, y: 5.085), control1: CGPoint(x: 1.928, y: 5.906), control2: CGPoint(x: 2.466, y: 5.462))
        p.closeSubpath()
        p.move(to: CGPoint(x: 3.641, y: 10.035))
        p.addCurve(to: CGPoint(x: 5.712, y: 10.765), control1: CGPoint(x: 4.234, y: 10.354), control2: CGPoint(x: 4.924, y: 10.597))
        p.addCurve(to: CGPoint(x: 8, y: 11), control1: CGPoint(x: 6.446, y: 10.922), control2: CGPoint(x: 7.209, y: 11))
        p.addCurve(to: CGPoint(x: 10.288, y: 10.765), control1: CGPoint(x: 8.791, y: 11), control2: CGPoint(x: 9.554, y: 10.922))
        p.addCurve(to: CGPoint(x: 12.359, y: 10.035), control1: CGPoint(x: 11.076, y: 10.597), control2: CGPoint(x: 11.766, y: 10.354))
        p.addCurve(to: CGPoint(x: 13.641, y: 8.992), control1: CGPoint(x: 12.928, y: 9.729), control2: CGPoint(x: 13.355, y: 9.381))
        p.addCurve(to: CGPoint(x: 14, y: 8), control1: CGPoint(x: 13.88, y: 8.666), control2: CGPoint(x: 14, y: 8.336))
        p.addCurve(to: CGPoint(x: 13.641, y: 7.008), control1: CGPoint(x: 14, y: 7.664), control2: CGPoint(x: 13.88, y: 7.334))
        p.addCurve(to: CGPoint(x: 12.359, y: 5.965), control1: CGPoint(x: 13.355, y: 6.619), control2: CGPoint(x: 12.928, y: 6.271))
        p.addCurve(to: CGPoint(x: 10.288, y: 5.235), control1: CGPoint(x: 11.766, y: 5.646), control2: CGPoint(x: 11.076, y: 5.403))
        p.addCurve(to: CGPoint(x: 8, y: 5), control1: CGPoint(x: 9.554, y: 5.078), control2: CGPoint(x: 8.791, y: 5))
        p.addCurve(to: CGPoint(x: 5.712, y: 5.235), control1: CGPoint(x: 7.209, y: 5), control2: CGPoint(x: 6.446, y: 5.078))
        p.addCurve(to: CGPoint(x: 3.641, y: 5.965), control1: CGPoint(x: 4.924, y: 5.403), control2: CGPoint(x: 4.234, y: 5.646))
        p.addCurve(to: CGPoint(x: 2.359, y: 7.008), control1: CGPoint(x: 3.072, y: 6.271), control2: CGPoint(x: 2.645, y: 6.619))
        p.addCurve(to: CGPoint(x: 2, y: 8), control1: CGPoint(x: 2.12, y: 7.334), control2: CGPoint(x: 2, y: 7.664))
        p.addCurve(to: CGPoint(x: 2.359, y: 8.992), control1: CGPoint(x: 2, y: 8.336), control2: CGPoint(x: 2.12, y: 8.666))
        p.addCurve(to: CGPoint(x: 3.641, y: 10.035), control1: CGPoint(x: 2.645, y: 9.381), control2: CGPoint(x: 3.072, y: 9.729))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// EllipseIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val EllipseIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "ellipse", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(EllipseIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_ellipse.xml · Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M3.167 5.085C3.843 4.721 4.622 4.445 5.503 4.257C6.306 4.086 7.138 4 8 4C8.862 4 9.694 4.086 10.497 4.257C11.378 4.445 12.157 4.721 12.833 5.085C13.534 5.462 14.072 5.906 14.446 6.415C14.815 6.917 15 7.446 15 8C15 8.554 14.815 9.083 14.446 9.585C14.072 10.094 13.534 10.538 12.833 10.915C12.157 11.279 11.378 11.555 10.497 11.743C9.694 11.914 8.862 12 8 12C7.138 12 6.306 11.914 5.503 11.743C4.622 11.555 3.843 11.279 3.167 10.915C2.466 10.538 1.928 10.094 1.554 9.585C1.185 9.083 1 8.554 1 8C1 7.446 1.185 6.917 1.554 6.415C1.928 5.906 2.466 5.462 3.167 5.085ZM3.641 10.035C4.234 10.354 4.924 10.597 5.712 10.765C6.446 10.922 7.209 11 8 11C8.791 11 9.554 10.922 10.288 10.765C11.076 10.597 11.766 10.354 12.359 10.035C12.928 9.729 13.355 9.381 13.641 8.992C13.88 8.666 14 8.336 14 8C14 7.664 13.88 7.334 13.641 7.008C13.355 6.619 12.928 6.271 12.359 5.965C11.766 5.646 11.076 5.403 10.288 5.235C9.554 5.078 8.791 5 8 5C7.209 5 6.446 5.078 5.712 5.235C4.924 5.403 4.234 5.646 3.641 5.965C3.072 6.271 2.645 6.619 2.359 7.008C2.12 7.334 2 7.664 2 8C2 8.336 2.12 8.666 2.359 8.992C2.645 9.381 3.072 9.729 3.641 10.035Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "ellipse" (line-round), MIT. https://gentleface.com/icons/ellipse
import 'package:flutter/widgets.dart';

class EllipseIcon extends StatelessWidget {
  const EllipseIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _EllipseIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _EllipseIconPainter extends CustomPainter {
  _EllipseIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(3.167, 5.085)
      ..cubicTo(3.843, 4.721, 4.622, 4.445, 5.503, 4.257)
      ..cubicTo(6.306, 4.086, 7.138, 4, 8, 4)
      ..cubicTo(8.862, 4, 9.694, 4.086, 10.497, 4.257)
      ..cubicTo(11.378, 4.445, 12.157, 4.721, 12.833, 5.085)
      ..cubicTo(13.534, 5.462, 14.072, 5.906, 14.446, 6.415)
      ..cubicTo(14.815, 6.917, 15, 7.446, 15, 8)
      ..cubicTo(15, 8.554, 14.815, 9.083, 14.446, 9.585)
      ..cubicTo(14.072, 10.094, 13.534, 10.538, 12.833, 10.915)
      ..cubicTo(12.157, 11.279, 11.378, 11.555, 10.497, 11.743)
      ..cubicTo(9.694, 11.914, 8.862, 12, 8, 12)
      ..cubicTo(7.138, 12, 6.306, 11.914, 5.503, 11.743)
      ..cubicTo(4.622, 11.555, 3.843, 11.279, 3.167, 10.915)
      ..cubicTo(2.466, 10.538, 1.928, 10.094, 1.554, 9.585)
      ..cubicTo(1.185, 9.083, 1, 8.554, 1, 8)
      ..cubicTo(1, 7.446, 1.185, 6.917, 1.554, 6.415)
      ..cubicTo(1.928, 5.906, 2.466, 5.462, 3.167, 5.085)
      ..close()
      ..moveTo(3.641, 10.035)
      ..cubicTo(4.234, 10.354, 4.924, 10.597, 5.712, 10.765)
      ..cubicTo(6.446, 10.922, 7.209, 11, 8, 11)
      ..cubicTo(8.791, 11, 9.554, 10.922, 10.288, 10.765)
      ..cubicTo(11.076, 10.597, 11.766, 10.354, 12.359, 10.035)
      ..cubicTo(12.928, 9.729, 13.355, 9.381, 13.641, 8.992)
      ..cubicTo(13.88, 8.666, 14, 8.336, 14, 8)
      ..cubicTo(14, 7.664, 13.88, 7.334, 13.641, 7.008)
      ..cubicTo(13.355, 6.619, 12.928, 6.271, 12.359, 5.965)
      ..cubicTo(11.766, 5.646, 11.076, 5.403, 10.288, 5.235)
      ..cubicTo(9.554, 5.078, 8.791, 5, 8, 5)
      ..cubicTo(7.209, 5, 6.446, 5.078, 5.712, 5.235)
      ..cubicTo(4.924, 5.403, 4.234, 5.646, 3.641, 5.965)
      ..cubicTo(3.072, 6.271, 2.645, 6.619, 2.359, 7.008)
      ..cubicTo(2.12, 7.334, 2, 7.664, 2, 8)
      ..cubicTo(2, 8.336, 2.12, 8.666, 2.359, 8.992)
      ..cubicTo(2.645, 9.381, 3.072, 9.729, 3.641, 10.035)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_EllipseIconPainter old) => old.color != color;
}
```