Skip to content
tablericons

general

Apple icon

Download the Apple icon as free SVG or PNG. Compare outline and filled styles. Copy React, Vue or Svelte code.

  • fruit
  • food
  • healthy
  • fresh
  • diet
  • vegetarian
  • nutrition
  • snack
Style
Size
Stroke
Color
Download SVG

Press C to copy SVG, J for JSX, D to download.

Category
general
Styles
Outline, filled
Component
IconApple
License
MIT · Paweł Kuna
Files
Apple icon, outlineoutline/apple.svg Apple icon, filledfilled/apple.svg

Code

Copy it the way you use it

apple.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"
 
>
  <path d="M4 11.319c0 3.102 .444 5.319 2.222 7.978c1.351 1.797 3.156 2.247 5.08 .988c.426 -.268 .97 -.268 1.397 0c1.923 1.26 3.728 .809 5.079 -.988c1.778 -2.66 2.222 -4.876 2.222 -7.977c0 -2.661 -1.99 -5.32 -4.444 -5.32c-1.267 0 -2.41 .693 -3.22 1.44a.5 .5 0 0 1 -.672 0c-.809 -.746 -1.953 -1.44 -3.22 -1.44c-2.454 0 -4.444 2.66 -4.444 5.319" />
  <path d="M7 12c0 -1.47 .454 -2.34 1.5 -3" />
  <path d="M12 7c0 -1.2 .867 -4 3 -4" />
</svg>

Use the Apple icon

For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.

React example
import { IconApple } from '@tabler/icons-react';

<IconApple size={24} stroke={2} />
Read the React guide
Vue example
import { IconApple } from '@tabler/icons-vue';

<IconApple :size="24" :stroke="2" />
Read the Vue guide
Svelte 5 example
import { IconApple } from '@tabler/icons-svelte-runes';

<IconApple size={24} stroke={2} />
Read the Svelte guide

Related

Related icons

See all 788 general icons
avocadobananasaladcarambolacherrygrapemeloncarrotcheesechocolatelemoncarrot-off