<!--
{
  "availability" : [
    "iOS: 14.5.0 -",
    "iPadOS: 14.5.0 -",
    "macCatalyst: 14.5.0 -",
    "macOS: 11.3.0 -",
    "tvOS: 14.5.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 7.4.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/LabelStyle/titleAndIcon",
  "metadataVersion" : "0.1.0",
  "role" : "Type Property",
  "symbol" : {
    "kind" : "Type Property",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI10LabelStylePA2A012TitleAndIconcD0VRszrlE05titlefG0AEvpZ"
  },
  "title" : "titleAndIcon"
}
-->

# titleAndIcon

A label style that shows both the title and icon of the label using a
system-standard layout.

```
@export(implementation) nonisolated static var titleAndIcon: TitleAndIconLabelStyle { get }
```

## Discussion

In most cases, labels show both their title and icon by default. However,
some containers might apply a different default label style to their
content, such as only showing icons within toolbars on macOS and iOS. To
opt in to showing both the title and the icon, you can apply the title
and icon label style:

```
Label("Lightning", systemImage: "bolt.fill")
    .labelStyle(.titleAndIcon)
```

To apply the title and icon style to a group of labels, apply the style
to the view hierarchy that contains the labels:

```
VStack {
    Label("Rain", systemImage: "cloud.rain")
    Label("Snow", systemImage: "snow")
    Label("Sun", systemImage: "sun.max")
}
.labelStyle(.titleAndIcon)
```

The relative layout of the title and icon is dependent on the context it
is displayed in. In most cases, however, the label is arranged
horizontally with the icon leading.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)