# Create 3D Icons from Scratch - Spline Academy (https://spline.design/academy/tutorials/create-3d-icons-from-scratch)

> Hey there! In this tutorial, we delve into creating 3D icons using Spline, covering topics like transforming 2D vectors to 3D, using the pen tool, and…

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Create 3D Icons from Scratch

# Create 3D Icons from Scratch

Spline 3DBeginner16 min

Hey there! In this tutorial, we delve into creating 3D icons using Spline, covering topics like transforming 2D vectors to 3D, using the pen tool, and importing and converting SVGs. Together we will create an icon from start to finish, adding materials to create a frosted glass effect. We also explore making icons interactive and leveraging them for web or app projects.

Let’s get started!

\---

Resources here! 👋: 🏃Here is a great tutorial to learn more about making things interactive in Spline: <https://www.youtube.com/watch?v=JPUSjRxQEKI&t=352s>

🏗️ More ways to build in Spline: <https://www.youtube.com/watch?v=xc-ExwgYDQI>

💻 3D for your Website:

<https://www.youtube.com/watch?v=ncoSN9mgWe8&t=165s>

💖 3D for iOS Projects:

<https://www.youtube.com/watch?v=44OPMq7FdD0&t=18s>

\--- Discover more amazing creators and projects #MadeInSpline at <https://community.spline.design/>

## What you’ll learn

1. [0:00Introduction to 3D Icons](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=0s)
2. [0:21Transforming 2D to 3D](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=21s)
3. [1:00Using Pen Tool and Shapes](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=60s)
4. [2:31Importing and Converting SVGs](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=151s)
5. [4:38Adding Materials for 3D Effects](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=278s)
6. [14:04Add a Simple Interaction to the Icon](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=844s)

## Related resources

- [Message IconTemplate](https://app.spline.design/academy/tutorials/create-3d-icons-from-scratch?redirect-duplicate-template-uuid=806351b2-5c4c-4587-b4e1-eaeb698c5445&is-2d-file=false)
- [Pen ToolDocument](https://docs.spline.design/designing-in-3-d/pen-tool)
- [Extruding 2D objects in 3DDocument](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [Materials & ShadingDocument](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Overview

- Spline 3D
- 16 min
- Beginner

## Part of

- [Spline 101 | Build Your First Interactive Scene](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/create-3d-icons-from-scratch)

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[Get Started with 3D in SplineSpline 3DBeginner26 min](https://spline.design/academy/tutorials/get-started-with-3d-in-spline)[How to Embed 3D Scenes from Spline into ShopifySpline 3DBeginner9 min](https://spline.design/academy/tutorials/how-to-embed-3d-scenes-from-spline-into-shopify)[How to Set Up Real-Time APIs and Webhooks for Your 3D ScenesSpline 3DAdvanced16 min](https://spline.design/academy/tutorials/how-to-set-up-real-time-apis-and-webhooks-for-your-3d-scenes)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.