Icon
Skip support for Icon images.
The following example screens and source code is from SkipUI’s
Showcase sample app
IconPlayground.swift
import SwiftUI
struct IconPlayground: View {
var body: some View {
ScrollView {
LazyVStack(spacing: 16) {
ForEach(Array(iconNames.enumerated()), id: \.offset) { iconIndexName in
iconRow(iconIndexName.element, index: iconIndexName.offset)
}
}
.padding()
}
.toolbar {
PlaygroundSourceLink(file: "IconPlayground.swift")
}
}
func iconRow(_ imageName: String, index: Int) -> some View {
HStack {
Text(imageName)
Spacer()
Image(imageName, bundle: .module)
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundStyle(iconColors[index % iconColors.count])
.frame(width: 30, height: 30)
}
}
}
private let iconColors = [Color.blue, Color.red, Color.green, Color.yellow, Color.orange, Color.brown, Color.cyan, Color.indigo, Color.mint, Color.yellow, Color.pink, Color.purple, Color.teal]
fileprivate let iconNames: [String] = [
"accessibility",
"add-circle",
"add",
"airplane",
"alarm",
"albums",
"alert-circle",
"alert",
"american-football",
"analytics",
"aperture",
"apps",
"archive",
"arrow-back-circle",
"arrow-back",
"arrow-down-circle",
"arrow-down-left-box",
"arrow-down-right-box",
"arrow-down",
"arrow-forward-circle",
"arrow-forward",
"arrow-redo-circle",
"arrow-redo",
"arrow-undo-circle",
"arrow-undo",
"arrow-up-circle",
"arrow-up-left-box",
"arrow-up-right-box",
"arrow-up",
"at-circle",
"at",
"attach",
"backspace",
"bag-add",
"bag-check",
"bag-handle",
"bag-remove",
"bag",
"balloon",
"ban",
"bandage",
"bar-chart",
"barbell",
"barcode",
"baseball",
"basket",
"basketball",
"battery-charging",
"battery-dead",
"battery-full",
"battery-half",
"beaker",
"bed",
"beer",
"bicycle",
"binoculars",
"bluetooth",
"boat",
"body",
"bonfire",
"book",
"bookmark",
"bookmarks",
"bowling-ball",
"briefcase",
"browsers",
"brush",
"bug",
"build",
"bulb",
"bus",
"business",
"cafe",
"calculator",
"calendar-clear",
"calendar-number",
"calendar",
"call",
"camera-reverse",
"camera",
"car-sport",
"car",
"card",
"caret-back-circle",
"caret-back",
"caret-down-circle",
"caret-down",
"caret-forward-circle",
"caret-forward",
"caret-up-circle",
"caret-up",
"cart",
"cash",
"cellular",
"chatbox-ellipses",
"chatbox",
"chatbubble-ellipses",
"chatbubble",
"chatbubbles",
"checkbox",
"checkmark-circle",
"checkmark-done-circle",
"checkmark-done",
"checkmark",
"chevron-back-circle",
"chevron-back",
"chevron-collapse",
"chevron-down-circle",
"chevron-down",
"chevron-expand",
"chevron-forward-circle",
"chevron-forward",
"chevron-up-circle",
"chevron-up",
"clipboard",
"close-circle",
"close",
"cloud-circle",
"cloud-done",
"cloud-download",
"cloud-offline",
"cloud-upload",
"cloud",
"cloudy-night",
"cloudy",
"code-download",
"code-slash",
"code-working",
"code",
"cog",
"color-fill",
"color-filter",
"color-palette",
"color-wand",
"compass",
"construct",
"contract",
"contrast",
"copy",
"create",
"crop",
"cube",
"cut",
"desktop",
"diamond",
"dice",
"disc",
"document-attach",
"document-lock",
"document-text",
"document",
"documents",
"download",
"duplicate",
"ear",
"earth",
"easel",
"egg",
"ellipse",
"ellipsis-horizontal-circle",
"ellipsis-horizontal",
"ellipsis-vertical-circle",
"ellipsis-vertical",
"enter",
"exit",
"expand",
"extension-puzzle",
"eye-off",
"eye",
"eyedrop",
"fast-food",
"female",
"file-tray-full",
"file-tray-stacked",
"file-tray",
"film",
"filter-circle",
"filter",
"finger-print",
"fish",
"fitness",
"flag",
"flame",
"flash-off",
"flash",
"flashlight",
"flask",
"flower",
"folder-open",
"folder",
"football",
"footsteps",
"funnel",
"game-controller",
"gift",
"git-branch",
"git-commit",
"git-compare",
"git-merge",
"git-network",
"git-pull-request",
"glasses",
"globe",
"golf",
"grid",
"hammer",
"hand-left",
"hand-right",
"happy",
"hardware-chip",
"headset",
"heart-circle",
"heart-dislike-circle",
"heart-dislike",
"heart-half",
"heart",
"help-buoy",
"help-circle",
"help",
"home",
"hourglass",
"ice-cream",
"id-card",
"image",
"images",
"infinite",
"information-circle",
"information",
"invert-mode",
"journal",
"key",
"keypad",
"language",
"laptop",
"layers",
"leaf",
"library",
"link",
"list-circle",
"list",
"locate",
"location",
"lock-closed",
"lock-open",
"log-in",
"log-out",
"logo-android",
"magnet",
"mail-open",
"mail-unread",
"mail",
"male-female",
"male",
"man",
"map",
"medal",
"medical",
"medkit",
"megaphone",
"menu",
"mic-circle",
"mic-off-circle",
"mic-off",
"mic",
"moon",
"move",
"musical-note",
"musical-notes",
"navigate-circle",
"navigate",
"newspaper",
"notifications-circle",
"notifications-off-circle",
"notifications-off",
"notifications",
"nuclear",
"nutrition",
"open",
"options",
"paper-plane",
"partly-sunny",
"pause-circle",
"pause",
"paw",
"pencil",
"people-circle",
"people",
"person-add",
"person-circle",
"person-remove",
"person",
"phone-landscape",
"phone-portrait",
"pie-chart",
"pin",
"pint",
"pizza",
"planet",
"play-back-circle",
"play-back",
"play-circle",
"play-forward-circle",
"play-forward",
"play-skip-back-circle",
"play-skip-back",
"play-skip-forward-circle",
"play-skip-forward",
"play",
"podium",
"power",
"pricetag",
"pricetags",
"print",
"prism",
"pulse",
"push",
"qr-code",
"radio-button-off",
"radio-button-on",
"radio",
"rainy",
"reader",
"receipt",
"recording",
"refresh-circle",
"refresh",
"reload-circle",
"reload",
"remove-circle",
"remove",
"reorder-four",
"reorder-three",
"reorder-two",
"repeat",
"resize",
"restaurant",
"return-down-back",
"return-down-forward",
"return-up-back",
"return-up-forward",
"ribbon",
"rocket",
"rose",
"sad",
"save",
"scale",
"scan-circle",
"scan",
"school",
"search-circle",
"search",
"send",
"server",
"settings",
"shapes",
"share-social",
"share",
"shield-checkmark",
"shield-half",
"shield",
"shirt",
"shuffle",
"skull",
"snow",
"sparkles",
"speedometer",
"square",
"star-half",
"star",
"stats-chart",
"stop-circle",
"stop",
"stopwatch",
"storefront",
"subway",
"sunny",
"swap-horizontal",
"swap-vertical",
"sync-circle",
"sync",
"tablet-landscape",
"tablet-portrait",
"telescope",
"tennisball",
"terminal",
"text",
"thermometer",
"thumbs-down",
"thumbs-up",
"thunderstorm",
"ticket",
"time",
"timer",
"today",
"toggle",
"trail-sign",
"train",
"transgender",
"trash-bin",
"trash",
"trending-down",
"trending-up",
"triangle",
"trophy",
"tv",
"umbrella",
"unlink",
"videocam-off",
"videocam",
"volume-high",
"volume-low",
"volume-medium",
"volume-mute",
"volume-off",
"walk",
"wallet",
"warning",
"watch",
"water",
"wifi",
"wine",
"woman",
]