## Overview

Use the `Icon` component to render a system icon from the built-in catalog. Reference an icon by its enum value on the platform you are targeting — the SDK serializes the icon name to the device, which renders it using the on-device icon set.

## Use this page with AI

Copy this prompt into your AI coding tool to choose display icons safely:

```text
Use https://wearables.developer.meta.com/docs/develop/dat/display-icons/, then use the Wearables MCP endpoint https://mcp.developer.meta.com/wearables to call search_dat_docs for current DAT display icon guidance. Inspect my display UI first, map each intended action or status to supported iOS and Android icon enum values from this reference, and update only the smallest icon usage needed. Preserve readable fallback labels and run the relevant local checks.
```

## Reference

| Icon | iOS | Android |
|------|-----|---------|
| ![airplane](/images/icons/airplane.png){:width="32" style="filter: invert(1)"} | .airplane | IconName.AIRPLANE |
| ![arrow-down-shallow-u](/images/icons/arrow-down-shallow-u.png){:width="32" style="filter: invert(1)"} | .arrowDownShallowU | IconName.ARROW_DOWN_SHALLOW_U |
| ![arrow-left](/images/icons/arrow-left.png){:width="32" style="filter: invert(1)"} | .arrowLeft | IconName.ARROW_LEFT |
| ![arrow-right](/images/icons/arrow-right.png){:width="32" style="filter: invert(1)"} | .arrowRight | IconName.ARROW_RIGHT |
| ![arrow-u-left](/images/icons/arrow-u-left.png){:width="32" style="filter: invert(1)"} | .arrowULeft | IconName.ARROW_U_LEFT |
| ![arrow-up-shallow-u](/images/icons/arrow-up-shallow-u.png){:width="32" style="filter: invert(1)"} | .arrowUpShallowU | IconName.ARROW_UP_SHALLOW_U |
| ![avatar](/images/icons/avatar.png){:width="32" style="filter: invert(1)"} | .avatar | IconName.AVATAR |
| ![avatar-off](/images/icons/avatar-off.png){:width="32" style="filter: invert(1)"} | .avatarOff | IconName.AVATAR_OFF |
| ![bed-side](/images/icons/bed-side.png){:width="32" style="filter: invert(1)"} | .bedSide | IconName.BED_SIDE |
| ![bell](/images/icons/bell.png){:width="32" style="filter: invert(1)"} | .bell | IconName.BELL |
| ![bell-diagonal-right-dot](/images/icons/bell-diagonal-right-dot.png){:width="32" style="filter: invert(1)"} | .bellDiagonalRightDot | IconName.BELL_DIAGONAL_RIGHT_DOT |
| ![bell-off](/images/icons/bell-off.png){:width="32" style="filter: invert(1)"} | .bellOff | IconName.BELL_OFF |
| ![bike-share](/images/icons/bike-share.png){:width="32" style="filter: invert(1)"} | .bikeShare | IconName.BIKE_SHARE |
| ![bug](/images/icons/bug.png){:width="32" style="filter: invert(1)"} | .bug | IconName.BUG |
| ![bullhorn](/images/icons/bullhorn.png){:width="32" style="filter: invert(1)"} | .bullhorn | IconName.BULLHORN |
| ![bus](/images/icons/bus.png){:width="32" style="filter: invert(1)"} | .bus | IconName.BUS |
| ![calendar](/images/icons/calendar.png){:width="32" style="filter: invert(1)"} | .calendar | IconName.CALENDAR |
| ![campfire](/images/icons/campfire.png){:width="32" style="filter: invert(1)"} | .campfire | IconName.CAMPFIRE |
| ![car-front-view](/images/icons/car-front-view.png){:width="32" style="filter: invert(1)"} | .carFrontView | IconName.CAR_FRONT_VIEW |
| ![caret-down](/images/icons/caret-down.png){:width="32" style="filter: invert(1)"} | .caretDown | IconName.CARET_DOWN |
| ![caret-left](/images/icons/caret-left.png){:width="32" style="filter: invert(1)"} | .caretLeft | IconName.CARET_LEFT |
| ![caret-right](/images/icons/caret-right.png){:width="32" style="filter: invert(1)"} | .caretRight | IconName.CARET_RIGHT |
| ![caret-up](/images/icons/caret-up.png){:width="32" style="filter: invert(1)"} | .caretUp | IconName.CARET_UP |
| ![cart](/images/icons/cart.png){:width="32" style="filter: invert(1)"} | .cart | IconName.CART |
| ![checkmark](/images/icons/checkmark.png){:width="32" style="filter: invert(1)"} | .checkmark | IconName.CHECKMARK |
| ![checkmark-circle](/images/icons/checkmark-circle.png){:width="32" style="filter: invert(1)"} | .checkmarkCircle | IconName.CHECKMARK_CIRCLE |
| ![circle-8-rays-large](/images/icons/circle-8-rays-large.png){:width="32" style="filter: invert(1)"} | .circle8RaysLarge | IconName.CIRCLE_8_RAYS_LARGE |
| ![circle-handle](/images/icons/circle-handle.png){:width="32" style="filter: invert(1)"} | .circleHandle | IconName.CIRCLE_HANDLE |
| ![clock](/images/icons/clock.png){:width="32" style="filter: invert(1)"} | .clock | IconName.CLOCK |
| ![cloud](/images/icons/cloud.png){:width="32" style="filter: invert(1)"} | .cloud | IconName.CLOUD |
| ![cloud-crescent-moon](/images/icons/cloud-crescent-moon.png){:width="32" style="filter: invert(1)"} | .cloudCrescentMoon | IconName.CLOUD_CRESCENT_MOON |
| ![cloud-dot-four-rays](/images/icons/cloud-dot-four-rays.png){:width="32" style="filter: invert(1)"} | .cloudDotFourRays | IconName.CLOUD_DOT_FOUR_RAYS |
| ![cloud-five-dashes](/images/icons/cloud-five-dashes.png){:width="32" style="filter: invert(1)"} | .cloudFiveDashes | IconName.CLOUD_FIVE_DASHES |
| ![cloud-hook-swirl](/images/icons/cloud-hook-swirl.png){:width="32" style="filter: invert(1)"} | .cloudHookSwirl | IconName.CLOUD_HOOK_SWIRL |
| ![cloud-lightning](/images/icons/cloud-lightning.png){:width="32" style="filter: invert(1)"} | .cloudLightning | IconName.CLOUD_LIGHTNING |
| ![cocktail-glass](/images/icons/cocktail-glass.png){:width="32" style="filter: invert(1)"} | .cocktailGlass | IconName.COCKTAIL_GLASS |
| ![code](/images/icons/code.png){:width="32" style="filter: invert(1)"} | .code | IconName.CODE |
| ![coffee-cup](/images/icons/coffee-cup.png){:width="32" style="filter: invert(1)"} | .coffeeCup | IconName.COFFEE_CUP |
| ![compass-north-up-red](/images/icons/compass-north-up-red.png){:width="32" style="filter: invert(1) hue-rotate(180deg)"} | .compassNorthUpRed | IconName.COMPASS_NORTH_UP_RED |
| ![container-with-lid](/images/icons/container-with-lid.png){:width="32" style="filter: invert(1)"} | .containerWithLid | IconName.CONTAINER_WITH_LID |
| ![cross-briefcase](/images/icons/cross-briefcase.png){:width="32" style="filter: invert(1)"} | .crossBriefcase | IconName.CROSS_BRIEFCASE |
| ![dropper](/images/icons/dropper.png){:width="32" style="filter: invert(1)"} | .dropper | IconName.DROPPER |
| ![envelope-open](/images/icons/envelope-open.png){:width="32" style="filter: invert(1)"} | .envelopeOpen | IconName.ENVELOPE_OPEN |
| ![exclamation-circle](/images/icons/exclamation-circle.png){:width="32" style="filter: invert(1)"} | .exclamationCircle | IconName.EXCLAMATION_CIRCLE |
| ![exclamation-triangle](/images/icons/exclamation-triangle.png){:width="32" style="filter: invert(1)"} | .exclamationTriangle | IconName.EXCLAMATION_TRIANGLE |
| ![eye](/images/icons/eye.png){:width="32" style="filter: invert(1)"} | .eye | IconName.EYE |
| ![fork-knife](/images/icons/fork-knife.png){:width="32" style="filter: invert(1)"} | .forkKnife | IconName.FORK_KNIFE |
| ![four-arcs-up-filled](/images/icons/four-arcs-up-filled.png){:width="32" style="filter: invert(1)"} | .fourArcsUpFilled | IconName.FOUR_ARCS_UP_FILLED |
| ![four-arcs-up-grayscale](/images/icons/four-arcs-up-grayscale.png){:width="32" style="filter: invert(1)"} | .fourArcsUpGrayscale | IconName.FOUR_ARCS_UP_GRAYSCALE |
| ![four-corner-frame](/images/icons/four-corner-frame.png){:width="32" style="filter: invert(1)"} | .fourCornerFrame | IconName.FOUR_CORNER_FRAME |
| ![gear](/images/icons/gear.png){:width="32" style="filter: invert(1)"} | .gear | IconName.GEAR |
| ![globe-western-hemisphere](/images/icons/globe-western-hemisphere.png){:width="32" style="filter: invert(1)"} | .globeWesternHemisphere | IconName.GLOBE_WESTERN_HEMISPHERE |
| ![graduation-cap](/images/icons/graduation-cap.png){:width="32" style="filter: invert(1)"} | .graduationCap | IconName.GRADUATION_CAP |
| ![hashtag](/images/icons/hashtag.png){:width="32" style="filter: invert(1)"} | .hashtag | IconName.HASHTAG |
| ![headphones](/images/icons/headphones.png){:width="32" style="filter: invert(1)"} | .headphones | IconName.HEADPHONES |
| ![heart](/images/icons/heart.png){:width="32" style="filter: invert(1)"} | .heart | IconName.HEART |
| ![house](/images/icons/house.png){:width="32" style="filter: invert(1)"} | .house | IconName.HOUSE |
| ![i-circle](/images/icons/i-circle.png){:width="32" style="filter: invert(1)"} | .iCircle | IconName.I_CIRCLE |
| ![light-bulb](/images/icons/light-bulb.png){:width="32" style="filter: invert(1)"} | .lightBulb | IconName.LIGHT_BULB |
| ![magic-wand](/images/icons/magic-wand.png){:width="32" style="filter: invert(1)"} | .magicWand | IconName.MAGIC_WAND |
| ![meta-ai](/images/icons/meta-ai.png){:width="32" style="filter: invert(1)"} | .metaAi | IconName.META_AI |
| ![mountain-square](/images/icons/mountain-square.png){:width="32" style="filter: invert(1)"} | .mountainSquare | IconName.MOUNTAIN_SQUARE |
| ![mountain-square-stacked](/images/icons/mountain-square-stacked.png){:width="32" style="filter: invert(1)"} | .mountainSquareStacked | IconName.MOUNTAIN_SQUARE_STACKED |
| ![museum-building](/images/icons/museum-building.png){:width="32" style="filter: invert(1)"} | .museumBuilding | IconName.MUSEUM_BUILDING |
| ![music-note](/images/icons/music-note.png){:width="32" style="filter: invert(1)"} | .musicNote | IconName.MUSIC_NOTE |
| ![nine-squares-grid](/images/icons/nine-squares-grid.png){:width="32" style="filter: invert(1)"} | .nineSquaresGrid | IconName.NINE_SQUARES_GRID |
| ![padlock-closed](/images/icons/padlock-closed.png){:width="32" style="filter: invert(1)"} | .padlockClosed | IconName.PADLOCK_CLOSED |
| ![padlock-open](/images/icons/padlock-open.png){:width="32" style="filter: invert(1)"} | .padlockOpen | IconName.PADLOCK_OPEN |
| ![palette](/images/icons/palette.png){:width="32" style="filter: invert(1)"} | .palette | IconName.PALETTE |
| ![paper-airplane](/images/icons/paper-airplane.png){:width="32" style="filter: invert(1)"} | .paperAirplane | IconName.PAPER_AIRPLANE |
| ![pencil](/images/icons/pencil.png){:width="32" style="filter: invert(1)"} | .pencil | IconName.PENCIL |
| ![pencil-square](/images/icons/pencil-square.png){:width="32" style="filter: invert(1)"} | .pencilSquare | IconName.PENCIL_SQUARE |
| ![person](/images/icons/person.png){:width="32" style="filter: invert(1)"} | .person | IconName.PERSON |
| ![person-circle](/images/icons/person-circle.png){:width="32" style="filter: invert(1)"} | .personCircle | IconName.PERSON_CIRCLE |
| ![phone](/images/icons/phone.png){:width="32" style="filter: invert(1)"} | .phone | IconName.PHONE |
| ![phone-handset-arrow-down-left](/images/icons/phone-handset-arrow-down-left.png){:width="32" style="filter: invert(1)"} | .phoneHandsetArrowDownLeft | IconName.PHONE_HANDSET_ARROW_DOWN_LEFT |
| ![phone-handset-arrow-up-right](/images/icons/phone-handset-arrow-up-right.png){:width="32" style="filter: invert(1)"} | .phoneHandsetArrowUpRight | IconName.PHONE_HANDSET_ARROW_UP_RIGHT |
| ![phone-slash](/images/icons/phone-slash.png){:width="32" style="filter: invert(1)"} | .phoneSlash | IconName.PHONE_SLASH |
| ![pizza-slice](/images/icons/pizza-slice.png){:width="32" style="filter: invert(1)"} | .pizzaSlice | IconName.PIZZA_SLICE |
| ![plus](/images/icons/plus.png){:width="32" style="filter: invert(1)"} | .plus | IconName.PLUS |
| ![plus-circle](/images/icons/plus-circle.png){:width="32" style="filter: invert(1)"} | .plusCircle | IconName.PLUS_CIRCLE |
| ![shopping-bag](/images/icons/shopping-bag.png){:width="32" style="filter: invert(1)"} | .shoppingBag | IconName.SHOPPING_BAG |
| ![sliders-horizontal](/images/icons/sliders-horizontal.png){:width="32" style="filter: invert(1)"} | .slidersHorizontal | IconName.SLIDERS_HORIZONTAL |
| ![smart-glasses](/images/icons/smart-glasses.png){:width="32" style="filter: invert(1)"} | .smartGlasses | IconName.SMART_GLASSES |
| ![smiley-circle](/images/icons/smiley-circle.png){:width="32" style="filter: invert(1)"} | .smileyCircle | IconName.SMILEY_CIRCLE |
| ![speaker-off](/images/icons/speaker-off.png){:width="32" style="filter: invert(1)"} | .speakerOff | IconName.SPEAKER_OFF |
| ![speaker-with-one-arc](/images/icons/speaker-with-one-arc.png){:width="32" style="filter: invert(1)"} | .speakerWithOneArc | IconName.SPEAKER_WITH_ONE_ARC |
| ![speaker-with-three-arcs](/images/icons/speaker-with-three-arcs.png){:width="32" style="filter: invert(1)"} | .speakerWithThreeArcs | IconName.SPEAKER_WITH_THREE_ARCS |
| ![speaker-with-two-arcs](/images/icons/speaker-with-two-arcs.png){:width="32" style="filter: invert(1)"} | .speakerWithTwoArcs | IconName.SPEAKER_WITH_TWO_ARCS |
| ![speech-bubble](/images/icons/speech-bubble.png){:width="32" style="filter: invert(1)"} | .speechBubble | IconName.SPEECH_BUBBLE |
| ![speech-bubble-off](/images/icons/speech-bubble-off.png){:width="32" style="filter: invert(1)"} | .speechBubbleOff | IconName.SPEECH_BUBBLE_OFF |
| ![stadium](/images/icons/stadium.png){:width="32" style="filter: invert(1)"} | .stadium | IconName.STADIUM |
| ![star](/images/icons/star.png){:width="32" style="filter: invert(1)"} | .star | IconName.STAR |
| ![star-circle-triangle-ai](/images/icons/star-circle-triangle-ai.png){:width="32" style="filter: invert(1)"} | .starCircleTriangleAi | IconName.STAR_CIRCLE_TRIANGLE_AI |
| ![taxi](/images/icons/taxi.png){:width="32" style="filter: invert(1)"} | .taxi | IconName.TAXI |
| ![three-dot-speech-bubble](/images/icons/three-dot-speech-bubble.png){:width="32" style="filter: invert(1)"} | .threeDotSpeechBubble | IconName.THREE_DOT_SPEECH_BUBBLE |
| ![three-dots-horizontal](/images/icons/three-dots-horizontal.png){:width="32" style="filter: invert(1)"} | .threeDotsHorizontal | IconName.THREE_DOTS_HORIZONTAL |
| ![three-horizontal-lines](/images/icons/three-horizontal-lines.png){:width="32" style="filter: invert(1)"} | .threeHorizontalLines | IconName.THREE_HORIZONTAL_LINES |
| ![three-horizontal-lines-stacked-descending](/images/icons/three-horizontal-lines-stacked-descending.png){:width="32" style="filter: invert(1)"} | .threeHorizontalLinesStackedDescending | IconName.THREE_HORIZONTAL_LINES_STACKED_DESCENDING |
| ![three-people-overlapping](/images/icons/three-people-overlapping.png){:width="32" style="filter: invert(1)"} | .threePeopleOverlapping | IconName.THREE_PEOPLE_OVERLAPPING |
| ![train](/images/icons/train.png){:width="32" style="filter: invert(1)"} | .train | IconName.TRAIN |
| ![tree](/images/icons/tree.png){:width="32" style="filter: invert(1)"} | .tree | IconName.TREE |
| ![triangle-left-vertical-line](/images/icons/triangle-left-vertical-line.png){:width="32" style="filter: invert(1)"} | .triangleLeftVerticalLine | IconName.TRIANGLE_LEFT_VERTICAL_LINE |
| ![triangle-right](/images/icons/triangle-right.png){:width="32" style="filter: invert(1)"} | .triangleRight | IconName.TRIANGLE_RIGHT |
| ![triangle-right-circle](/images/icons/triangle-right-circle.png){:width="32" style="filter: invert(1)"} | .triangleRightCircle | IconName.TRIANGLE_RIGHT_CIRCLE |
| ![triangle-right-vertical-line](/images/icons/triangle-right-vertical-line.png){:width="32" style="filter: invert(1)"} | .triangleRightVerticalLine | IconName.TRIANGLE_RIGHT_VERTICAL_LINE |
| ![two-arrows-clockwise](/images/icons/two-arrows-clockwise.png){:width="32" style="filter: invert(1)"} | .twoArrowsClockwise | IconName.TWO_ARROWS_CLOCKWISE |
| ![two-lines-parallel](/images/icons/two-lines-parallel.png){:width="32" style="filter: invert(1)"} | .twoLinesParallel | IconName.TWO_LINES_PARALLEL |
| ![two-squares-stacked-right-down](/images/icons/two-squares-stacked-right-down.png){:width="32" style="filter: invert(1)"} | .twoSquaresStackedRightDown | IconName.TWO_SQUARES_STACKED_RIGHT_DOWN |
| ![two-triangles-left](/images/icons/two-triangles-left.png){:width="32" style="filter: invert(1)"} | .twoTrianglesLeft | IconName.TWO_TRIANGLES_LEFT |
| ![two-triangles-right](/images/icons/two-triangles-right.png){:width="32" style="filter: invert(1)"} | .twoTrianglesRight | IconName.TWO_TRIANGLES_RIGHT |
| ![video-camera](/images/icons/video-camera.png){:width="32" style="filter: invert(1)"} | .videoCamera | IconName.VIDEO_CAMERA |
| ![video-camera-off](/images/icons/video-camera-off.png){:width="32" style="filter: invert(1)"} | .videoCameraOff | IconName.VIDEO_CAMERA_OFF |
| ![wristband](/images/icons/wristband.png){:width="32" style="filter: invert(1)"} | .wristband | IconName.WRISTBAND |
| ![wristband-slash](/images/icons/wristband-slash.png){:width="32" style="filter: invert(1)"} | .wristbandSlash | IconName.WRISTBAND_SLASH |
| ![x](/images/icons/x.png){:width="32" style="filter: invert(1)"} | .x | IconName.X |