This document aims to assist Korean users learning Framer who face difficulties due to the lack of Korean resources. We translated the content from the official blog into Korean and added practical information. We hope this helps Framer users in some way.

What is an Icon?

An icon is a small graphical symbol that visually represents a meaning.
It is commonly used in buttons, menus, and information displays, and it can convey functions or content to users intuitively without text, positively impacting UI simplification and usability.

Adding Basic Icon Sets

Framer supports vector icon sets like Phosphor, Feather, Hero, Iconoir, and Twemoji by default.

1. Select [+]Insert → Icons

2. Drag (click) the desired icon onto the canvas

3. Click Icon in the right properties panel

4. Click on the desired icon in the opened icon panel and customize it

Adding Icons via Plugins

You can add more icons by installing icon-related plugins (Phosphor, Bootstrap Icons, Logofy, etc.) available on the Framer Marketplace.

1. Click Marketplace

2. Click the Plugins button in the top menu

3. Search for the desired icon set

4. Click the Open Plugin button

5. Select the page where the icon plugin needs to be added

6. Click on the desired icon in the icon panel and customize it

Note : You can open the icon panel directly on the page by selecting Plugins from the floating bar at the bottom of the page and searching for and running the desired icon plugin. (Details of the plugin cannot be viewed)

Importing SVG Icon Files Directly

You can apply SVG files as icons in Framer by dragging and dropping them onto the canvas or by pasting them (macOS: ⌘+C,⌘+V Windows: Ctrl+C,Ctrl+V).
Note : This is a convenient method when you want to directly insert and use logos or custom icons.

This article is adapted from Framer's official blog content titled 'How to add icons'.