This document aims to alleviate the difficulties Korean users face due to a lack of Korean resources while learning Framer. It translates the content of the official blog into Korean and adds practical information. We hope this will be of some help to you who use Framer.

What are Icons?

An Icon is a small graphic symbol that visually represents meaning.
They are mainly used for buttons, menus, information displays, and more, and can intuitively convey functionality or content to users even without text, positively impacting UI simplification and usability.

Adding Basic Icon Set

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

1. Select [+]Insert → Icons.

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

3. Click Icon in the right properties panel.

4. Click the desired icon in the open icon panel and then modify it.

Adding Icons with Plugins

You can add more types of icons by installing icon-related plugins (Phosphor, Bootstrap Icons, Logofy, etc.) from 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 you need to add the icon plugin.

6. Click the desired icon in the icon panel and then modify it.

Note : By selecting Plugins in the bottom floating bar of the page, you can search for and run the desired icon plugin, which will open an icon panel directly on the page. (Details of the plugin cannot be confirmed)

Importing SVG Icon Files Directly

You can apply the desired SVG file as an icon in Framer by dragging and dropping the SVG file directly onto the canvas or by pasting (macOS: ⌘+C, ⌘+V, Windows: Ctrl+C, Ctrl+V) the SVG file.
Note : This is a convenient method when directly inserting and using logos or custom icons.

This post is translated and adapted from the Framer official blog’s ‘How to add icons’ content.