Create an App Icon in a Few Clicks! (BEGINNER FRIENDLY)

Hi everyone, I’m excited to share an Instructables project that simplifies and speeds up your AutoCAD workflow, incorporating SF Symbols, Icon Composer, and Xcode. As a dual Autodesk certified professional (Fusion and AutoCAD), Autodesk Design and Make ambassador, and iOS developer, I’m thrilled to share my diverse passions and experiences with other Apple engineers and app developers.

This year, I entered the Apple Swift Student Challenge with my first iOS and iPadOS app, ActivTimer. The goal was to prompt users with an alarm 🚨 who spend a lot of time sitting—whether drafting, working, or just relaxing—to get up and move. I wanted to do this by suggesting workouts, stretching with yoga poses, or even some gymnastics, along with mindfulness practices.

While designing the timer, workouts, activities, rewards, and UI, I had an idea: why not combine my recent AutoCAD certification with current Apple technologies to showcase my creative skills?

I started coding my first iOS app in January while studying for my AutoCAD certification (my New Year’s resolution!). So, between the drafting table and the Xcode compiler, I wanted to bring everything together while preparing for the exam. I began using the SF Symbols app to export PNGs or SVGs of the symbols and convert them to DXF. Then, I created a custom icon in AutoCAD and converted it to SVG to use in Icon Composer.

The process was a success! It took me about 30 minutes to an hour to perfect it and integrate it into my Xcode app project/playground. My Swift Student Challenge contestants and Apple developers were amazed by how I combined SF Symbols to create a custom symbol. They asked me all sorts of questions, like:

“How did you make this custom SF Symbols app icon with the Liquid Glass variant?”

“How’d you create that icon?” and many more.

They even asked me to design an icon for them, or maybe tweak SF Symbols into DXFs, remix it on the software, and then add it to their app project! Now, let’s see how this quick AutoCAD x Icon Composer workflow works, which is also easy to follow for everyone!

- A MacBook Pro or any Mac running macOS 26 Tahoe or higher.

1. AutoCAD for Mac, DraftSight, or any other 2D CAD software of your choice. AutoCAD LT is also compatible for this project. ANY VERSION IS FINE. If you run a virtual machine to use the Windows version of AutoCAD or anything not available on Mac, make sure to email yourself, or use iCloud or OneDrive to send the DXF file out!

Download it from the Autodesk website; a student license is free.

1. SVG to DXF websites that convert AutoCAD DXF files into SVGs for free and unlimited use. I used these ones: https://anyconv.com/dxf-to-svg-converter/ and https://convertio.co/dxf-svg/
2. Xcode 26 or later, as it supports Icon Composer and Liquid Glass. Download here on Mac App Store or Apple Developer website.
3. Icon Composer is also required on your Mac. Links are available on the Apple Developer website.
4. SF Symbols app. Download it from the Apple Developer website.
5. For fills or color/effect changes, use a photo/vector editing app like InkScape or Corel DRAW, or AI image editing website or software of your choice. I used Bing Image Creator to add fills to my AutoCAD custom symbol before adding the app icon to Xcode assets. I’ll explain this further in a later section.

Instructions are demonstrated using AutoCAD 2026, Xcode 26.3 RC, and Bing Image Creator.

New users are welcome to give it a shot! It’s pretty straightforward, just about managing blocks, layers, drawing tools, and converting file formats. If you’re looking to brush up on AutoCAD or just getting started, I suggest checking out Verwey Drafting and SourceCAD’s YouTube channel and website. They also have some great resources I used to refresh my skills and get ready for the AutoCAD exam. Links to their websites: https://sourcecad.com/courses/autocad-essentials-course/ and https://www.youtube.com/@VerweyDraftingInc

Open SF Symbols on your Mac. As you browse the gallery, you’ll encounter hundreds to thousands of UI icons categorized into various groups. Additionally, a sidebar on the left displays the categories and all the icons within each category.

Select a few icons that align with your requirements, ideally with at least two symbols you'd like to remix or rearrange with on AutoCAD. Ensure that they collectively convey a story or represent the ‘image/branding’ of your app. Embrace creativity and have fun experimenting with different combinations!

For this tutorial, please refrain from incorporating any animations, transitions, or Draw On/Off features on the symbols. These elements won’t function as app icons, as app icons are static images, and SVGs/AutoCAD drawings (DWG and DXF) are also inherently static. Animations are only compatible with SwiftUI and UIKit inside Xcode.

Please double-check the right inspector pane to ensure that the icon name, color, and style (Gradient or Monochrome) are accurate for each icon, prior to exporting it. Also, make sure that any animations or transitions are turned off.

For each symbol you plan to use:

* In the SF Symbols app, right-click on the symbols you want to use in the selection pane.

* Alternatively, go to the menu bar in the top-left corner of your screen and select Edit.

* From the drop-down menu, choose the symbol you want to copy as an image and select your options. Then select Copy Image!

I’d recommend using a Large size with at least 200 dpi, see sample above. Keep the scale at 1, because AutoCAD has more dynamic scale tools to use when customizing your unique icons vs having it export as scaled.

This will ensure that the symbols display correctly in AutoCAD with the right geometries when you import them after putting into a SVG or JPEG to DXF converter. It will also make it easier to modify as polyline entities and for more precise adjustments for trimming, offsetting, drawing, and exploding.

Open a new Finder window on your Mac by clicking on the Finder icon or on the menu bar of Finder from File > New Finder Window, and hit Command-V on your keyboard to paste all the symbols you exported off SF Symbols. Do this for each one, and put it in an easy to access folder!

Great news! Now, let’s bring these SF symbols to life for our custom icon!

Just a side note:

For our developers and designers who are new to CAD, DXF is a versatile 2D CAD file format that can be easily edited in any CAD drawing software, including Autodesk Fusion and AutoCAD. You can also create DXFs by saving your drawings or using built-in features in these apps.

DXFs are also easy to scale and edit, similar to DWGs, which are the standard 2D CAD documents in AutoCAD.

To convert your SF Symbol icons to DXF, try a converter like AnyConv. There's a plenty on the internet. Simply upload the SF Symbol icons you’ve pasted into Finder into the file upload section of the website.

Once you’ve converted them, click “convert” and wait for the magic to happen. Then, download the DXFs of your SF Symbols from the Downloads tab in Safari. once complete.

Let’s tweak those icons and get some creative juices flowing! Now the fun part begins.

Open AutoCAD for Mac (or any CAD software) from Applications. Start a fresh drawing without using a custom template. Set UNITS to inches or millimeters (metric), and adjust the precision to your liking.

In the right pane (these are used instead of the Ribbon in AutoCAD’s Windows versions of the app), you’ll find a list of layers, resembling a file explorer of colored components.

This is the Layer Properties Manager. It helps keep your drawings organized, even if you need to create different layers of icon geometries. If it doesn’t appear, just hit Cmd-4, and it should pop up.

On the Layer Properties Manager, click on the New Layer button. Create a new layer below Layer 0 and name it AppIcon. Choose a gray or white color that works best for DXF to SVG export. Make it the active layer by clicking on the layer dropdown and selecting AppIcon.

Just a heads-up: PLEASE DON’T DELETE LAYER 0!!! This is a key #1 rule of AutoCAD, and this default layer holds unique properties that are essential for block importing and editing. Keep it in your file!

I’ve also included a cheatsheet for AutoCAD keyboard shortcuts for the Mac version, which I’ve attached below.

To open your DXF files in AutoCAD for Mac, simply click on the folder icon in the top right corner, or use File > Open from the menu bar. Then, make sure the file type is set to AutoCAD 2018 DXF.

Next, locate the DXF files you downloaded from Safari after converting them from SF Symbols. Select the files you’d like to use in your app icon, and then open them. AutoCAD will automatically convert them into DWG files, which are the app’s native 2D drawing format. Other CAD apps like Fusion, Inventor, and DraftSight also use these files for their 2D CAD drawings.

When you open your DXFs, they’ll appear as separate DWGs in separate tabs for your SF Symbols. To copy the DXF symbols of your SF Symbols, use Cmd-A to select all the lines and geometries or select them with a crossing window by dragging your mouse, then copy them.

Next, switch to the tab where your app icon design is located.

To paste the symbols, simply hit Cmd-V or right-click > Clipboard > Paste on the drawing tab of your app icon. For more precise control over scaling, moving, copying, and repositioning the symbols, use the same paste menu by right-clicking and selecting Clipboard > Paste as Block. These symbols will be added as blocks, and once you’re happy with their placement using the MOVE and SCALE commands, you can explode them by hitting the X key to make every poly line editable.

Feel free to experiment with the symbols you imported from SF Symbols in AutoCAD. You can create a custom logo or symbol by using Offset on some notification badge circles or small glyphs to design a new icon (like the one above). You can also turn it into a scene and try the Rotate command, along with TRIM and OFFSET tools, to combine multiple symbols into a single working icon! Let your creativity flow!

Once your app icon outlines are looking fantastic and all ready to go, it’s time to export them to DXF and convert them to SVG for the icon composer.

To export the entire file, use these commands by typing them in:

- DXFOUT: Save the DWG as DXF directly into your Finder.

- SAVEAS: Save the drawing as DXF or any other file type into Finder. You’ll need to specify it as DXF and save it there. For more details, check out this Autodesk documentation.

If you’re using an SVG editor or want to separate it to fill shapes of different colors, like the box app icon I created for a friend, you can do a partial version of SAVEAS. Select the shape or geometry you want to export separately and then use the WBLOCK command. That can also be done by hitting the W key. I attached a video under this step if you need a little extra help.

A separate dialogue box will appear, allowing you to choose whether the selected shape should be a block. You can also retain objects, units, and configurations, just like you would when saving a regular block in AutoCAD. The choice is yours!

After saving the DXF(s), switch to Safari and drop the file into the DXF to SVG conversion website of your choice. Convert all the DXFs to SVGs. Then download it to your Mac.

Once your app icon SVGs have been converted, it’s time to add the final touches.

Open Icon Composer on your Mac. If you’re using a regular app project or playground in Xcode, navigate to the menu bar on your Xcode window, click on Xcode > Open Developer Tool > Icon Composer.

You’ll see an editor window on Icon Composer. On the left, there’s a project navigator for your symbols as layers. In the bottom of the sidebar, click on the plus button. Select the SVGs you converted from AutoCAD DXFs in Step 8 and insert them into your app icon file. All the SVGs will appear inside there. You can even group any separate ones once you’re satisfied with their placement.

The symbol will appear as lines unless the SVG was edited with a fill after conversion before using Icon Composer (see note below).

Play around with centering and aligning the symbol(s). Use the right inspector pane to modify properties of your SVGs and app icon, such as gradient/solid color(s), Liquid Glass reflectivity and angles, Dark/Tinted/Translucent modes, and many more.

You can also look at the bottom of the editor to change icon colors for different appearances set by the device settings and for different Apple platforms (iOS, macOS, watchOS, visionOS, and many more!). You can also adjust the scale and configuration of the icons in various settings.

Here’s a full guide on Icon Composer for navigation and all features to make your app icons polished.

Once everything is set, export the icon by clicking on File > Export and save it as a JPEG or PNG in the maximum allowable dimensions of 1024 by 1024 pixel resolution icon image. This icon is ready to be added to Xcode or post-processed into an editor to fill the icon outlines.

Note: If you used the WBLOCK feature in the previous step to export the DXFs separately to create multicolored icon shapes similar to the example in the third image, you can use a SVG/vector art editor like Inkscape, COREL Draw, Adobe Illustrator, or an AI image editor to fill in the colors separately after converting the DXFs. Alternatively, you can use Icon Composer to apply the Liquid Glass effect to a single image already post-processed in an editor beforehand, instead of editing it with the icon already exported from Icon Composer to save time.

In other words, if you use DXFOUT or SAVEAS as a DXF (in the fourth picture) and didn’t edit the DXF or SVG beforehand with an editor, add it to your Icon Composer icon file, export it, and then import the icon image file into an AI image or photo editor. Fill in the entire icon symbol outline with a color or texture of your choice, and then add any other finishing touches as needed, such as color filters.

It's almost done! Now let's add your custom app icon you made in AutoCAD and Icon Composer.

Navigate to your Xcode app playground or project. You can add your finished app icon in two ways:

1. First image: drag and drop the .icon file exported from Icon Composer into the Xcode project navigator (sidebar) by dragging from the Finder, or press the plus button on the bottom left and select Add Files to [PROJECT NAME]… and open the .icon app icon file you exported from Icon Composer. Ensure it’s added to the target/scheme, and then change the properties of the app icon under your Xcode project settings to match the extension of the imported icon file.
2. Second image: open your Asset Catalog in the Project Navigator, go to AppIcon, and drop the finished app icon in the designated spots with the JPEG/PNG app icon images from Icon Composer, as shown in the diagram. There are also alternative spots for different appearances you’ll use in your app, such as Tinted, Dark, Light, and Transparent icons. Add these alternate appearance icons if you have them. After inserting the app icon, change the properties of the app icon under your Xcode project settings to match the extension of the imported icon file.

Swift Playgrounds in Xcode follows the second method, but with a slight variation. If you’re in a playground app project, go to the app playground settings by clicking on the name of your app in the project navigator. Ensure Custom is selected for the app icon instead of the placeholder (see the third image). Additionally, the asset library may not appear by default when an app playground is created, so you’ll need to add it manually by clicking on File > New > New File from Template and searching for the Asset Catalog, then placing it in your project.

Once you add in the icon, build your app (Cmd-B), and run it (Cmd-R) to verify your app icon is visible in the iPhone or Apple device simulator on Xcode or your live device you're sandboxing your app in Developer Mode. Test a push notification, look at the Home Screen and/or the Dock and look at the app list in the App Library on iOS/iPadOS to make sure the app icon you created is there.

Once everything's set, there you have it! Your shiny new and clean app icon, made Swiftly and nicely with SF Symbols, AutoCAD, Icon Composer and a dash of Liquid Glass consistency.