Animated 3D Icons From a Single Prompt: How to Use the 3dicon Claude Code Skill.

A Claude Code skill, 3dicon, has been released that helps with the whole process of making a 3D icon, adding a natural looping animation, and exporting it as a transparent-background Animated WebP. Once you settle on the icon's style and then describe the motion, it produces output you can use right away on the web and in apps.

The default output is 384px, and the example also produces a 288px WebP. After installing, you can start by writing the icon description and motion in ordinary sentences.

From a still icon to a transparent Animated WebP

3dicon starts by making a still image of the icon. After you confirm the design, you describe how the icon actually moves, and a video model generates a loop animation that returns to the starting pose. It separates the background, refines the semi-transparent edges, encodes to Animated WebP, and checks the loop.

1. An image model creates a still image of the 3D icon.
2. A video model starts from the first frame and creates motion that returns to the original pose.
3. A background separation step applies transparency and preserves soft edges.
4. It encodes to Animated WebP and checks the motion and the loop connection.

The default master image is 512px and the default WebP output is 384px. You can set the size with the --size option, and the README's stopwatch example was output at 288px, 24fps, 122 frames, with a transparent background.

You can see the still image from the same example at still.png, and check the frames from each step in the contact sheet. You can watch the full demo in the README example MP4.

Installing the plugin in Claude Code

You install 3dicon through the Claude Code plugin marketplace. After installing, prepare the Python dependencies in the skill folder and set up your PATH so ffmpeg is available.

/plugin marketplace add samyost1/3dicon
/plugin install 3dicon

cd ~/.claude/skills/3dicon
pip install -r requirements.txt
cp .env.example .env

Put the API keys for the image and video providers you chose into the environment file. You need ffmpeg, and on first run it downloads a background-separation model of about 180MB. The repository provides a plugin install flow for Claude Code.

Describe the style and motion you want in sentences

When you ask in Claude Code for the kind and shape of the icon, it proposes a still image first. For example, the README shows this stopwatch prompt.

a 3D stopwatch icon in sage green and cream, soft matte plastic,
rounded friendly proportions, small feet and a top button

To keep the style consistent, repeat shared attributes like color, material, shape, and proportions in each icon request. For motion, rather than writing only onomatopoeia or a mood, describe concretely how the object actually moves.

the stopwatch rocks gently side to side while its hand sweeps steadily clockwise

Choose the intensity of the movement from still, calm, lively, and playful. The skill suggests native, event, part, and surface strategies to fit the type of movement, and for some motions you can also use the --emit option. If you decide the movement based on the icon's small parts and material properties, it's easier to make a natural loop.

Setting up image and video models and API keys

You can configure the image model and the video model separately. In the repository's example, the default image backend is OpenAI, and the motion video uses Seedance 2.0 on OpenRouter. You can switch to a Gemini image model, OpenRouter's unified image API, or Seedance 2.5, Veo 3.1, Hailuo 3, Wan 2.7, and others.

To run everything from images to video with a single OpenRouter key, specify the image backend in .env.

ICONLOOP_IMAGE_BACKEND=openrouter
OPENROUTER_API_KEY=your_key

To pick model names yourself, use ICONLOOP_IMAGE_MODEL and ICONLOOP_VIDEO_MODEL. For the image key, set one of OPENAI_API_KEY, GOOGLE_API_KEY, or OPENROUTER_API_KEY depending on the image backend you choose, and the --via replicate path uses REPLICATE_API_TOKEN.

The CLI, step by step

Besides natural-language requests, you can run each step separately with python -m iconloop.

python -m iconloop --out out still \
  --prompt "a 3D stopwatch, sage green and cream, soft matte plastic"

python -m iconloop --out out animate \
  --motion "the stopwatch rocks gently while its hand sweeps clockwise"

python -m iconloop --out out matte
python -m iconloop --out out encode --sweep
python -m iconloop --out out encode --size 288 --name timer
python -m iconloop --out out verify

Expected cost and license

Per the repository's guidance, generating a still icon costs about $0.13, and the full animation pipeline after approving the image costs about $0.48 and takes about 4 minutes. Actual API costs vary with the provider and model settings you connect.

The project code is released under the MIT license, and the repository description says you're free to use the icons you generate. You can review the still image and the motion in order, confirm the style and movement you want, and then continue the generation process.

In the demo video shared by creator Sam Yost, you can see the flow from prompt to finished animation.

Sources

• GitHub: samyost1/3dicon · Usage guide
• Model environment variable example · MIT License
• X @samuel_yostt: 3dicon demo video