Creating high-quality icons is a fundamental skill for any UI/UX designer. WiFi icon A symbol is one of the most common interface elements found in mobile apps, websites, and desktop programs. Despite its apparent simplicity, correctly constructing geometric shapes requires a basic understanding of Bézier curves and Boolean operations in a graphics editor. In this article, we'll walk through the detailed process of creating a responsive and aesthetically pleasing wireless network symbol.
You don't need any complex plugins or third-party libraries to get started. Figma provides all the necessary tools for drawing from scratch, allowing you to create unique assets that fit perfectly into your design system. We'll walk you through the process, from creating a basic circle to final export settings, paying particular attention to the mathematical precision of proportions, as this is what makes an icon legible even at small sizes.
It is important to immediately decide on the style: whether it will be a linear icon (outline) or filled. The standard stroke thickness for icons in interfaces is usually 1.5 or 2 pixels., ensuring crisp display on screens of any density. Let's get started creating a workspace and preparing the canvas for your first professional icon.
Setting up the frame and baseline grid
Before you start drawing, you need to prepare a proper workspace. Create a new frame by pressing the key F or by selecting the Frame tool in the toolbar. The optimal artboard size for an icon is 24x24 pixels, as this is the standard size for most interface libraries, but for the convenience of detailed drawing, you can temporarily increase the scale to 48x48.
A critical step is enabling the grid. Go to the Design panel on the right, find the Grids section, and add a Grid grid. Set the cell size to 1 pixel and a non-distracting color, such as light gray. This will allow you to align elements with pixel-perfect precision, which is especially important for vector graphics.
It's also recommended to enable the Snap to Grid feature so that your points and lines automatically snap to grid nodes as you move them. This will eliminate jagged edges and ensure symmetry. If you plan to scale the icon, ensure all coordinates are integers, avoiding fractional values, which can cause blurry edges during rendering.
⚠️ Note: When working with small icons (less than 16x16 pixels), complex geometry can become jumbled. Always check the readability of the WiFi icon at the target size by zooming out.
Creating a central point of radiation
Every WiFi icon starts with a central dot, symbolizing the signal source. Select the Ellipse tool (key O) and draw a circle in the center of your frame. For a standard 24x24 pixel icon, the diameter of this dot is typically 4 pixels, which leaves enough room for the arcs around it.
Align the circle precisely in the center of the canvas using the Smart Guides that appear in pink as you move the object. Make sure the X and Y coordinates of the circle's center align with the center of the frame. In the properties panel on the right, ensure the Width and Height values are equal and the corners are set to automatic for a perfect circle.
Now we need to turn this circle into a vector object for further operations. Select the circle and click Shift + E Or select Flatten in the top menu to convert it to a vector mesh. While this isn't strictly necessary for a simple circle, it's useful for layer consistency. The dot color is typically black or dark gray for outline icons.
Drawing signal arcs using the Arc Tool
The most important part of the WiFi icon is the arcs radiating from the center point. In modern versions Figma The Arc tool is ideal for this. Select it from the Ellipse tool drop-down menu or click Shift + ODraw an arc above the center point, enclosing it.
To create perfect concentric arcs, adjust the settings in the right panel. Set the Stroke weight to 2 pixels. Then change the Cap type to Round so the arc edges are rounded rather than flat. This will give the icon a friendly and modern look.
To create a fan effect, the arcs should have different radii but the same angle of coverage. The default angle of coverage for the WiFi icon is 90 degrees (a quarter circle). You can adjust this by dragging the yellow control points on the object or by setting precise Start Angle and End Angle values in the Properties panel if you're using the Precise Angle Math plugin.
Adjusting thickness and rounding
After creating the basic shapes, it's time to fine-tune the appearance. Select all the created arcs and the center point. In the Stroke panel, make sure the Align stroke is set to Center or Outside, depending on how you plan to use the icon. For the web, a centered stroke is most often used.
If you're creating a filled icon, you'll need to use Boolean operations. Draw semicircles of the desired size, then subtract the inner areas from them so that only the rings remain. To do this, arrange the circles on top of each other, select them, and use the command Subtract selection in the Boolean groups section.
Pay special attention to the distance between the arcs. It should be visually uniform. If the line thickness is 2 pixels, then the distance between the lines should also be 2 pixels. This creates a rhythmic pattern that the eye perceives as harmonious. Violating this rule can make the icon appear "heavy" on one side and "airy" on the other.
⚠️ Note: When scaling an icon to 16x16 pixels or smaller, thin 1px lines may disappear or become broken. For these sizes, it's recommended to increase the line thickness or simplify the geometry.
Using Boolean operations for complex shapes
Creating more complex WiFi icon variations, such as those with a ripple effect or a specific style, often requires Boolean operations. Select two intersecting objects and choose Union, Subtract, Intersect, or Exclude from the top bar. This allows you to create composite shapes from simple geometric shapes.
For example, to create a "Glassmorphism" icon, you could create arcs, add a background blur effect, and set transparency. However, for a standard UI, this is overkill. The classic approach requires clean vector paths without unnecessary effects, which can render poorly on older devices.
Don't forget to check the result of Boolean operations in Outline mode (key Ctrl + Y or Cmd + Y). This will show you the actual structure of the vectors. If there are extra points left after the Subtract operation, use the Pen tool (P) to remove them to reduce the file size.
Why is vector optimization important?
Extra nodes in a vector path increase the size of the SVG file and can cause artifacts when scaling. Always inspect the path in Outline mode and remove unnecessary nodes.
Working with color and styles
Color isn't just a fill; it's a way to communicate state. The standard color for a WiFi icon when inactive is gray or black. However, red is often used for the "no connection" state, and green or blue for an active connection. Create color styles in Figma for quick switching.
For line icons, the color is set in the Stroke parameter. For filled icons, it's set in the Fill parameter. Make sure you use Variables or Color Styles so that the icon automatically adapts when you change the app theme (Dark Mode / Light Mode). Lines can be brighter in a dark theme, and darker in a light theme.
It's also worth considering creating a multi-layered icon where the signal level is represented by the number of filled arcs. This requires creating a component with variants, where each signal level (1, 2, 3, 4 divisions) will have its own set of filled and empty arcs.
| Parameter | Value for 24px | Value for 16px | Description |
|---|---|---|---|
| Frame size | 24x24 px | 16x16 px | Basic icon grid |
| Line thickness | 2 px | 1.5 px | Stroke weight |
| Central point | 4 px | 3 px | Diameter of the source circle |
| Indentation between arcs | 2 px | 1.5 px | Distance between signal lines |
Creating a component and variants
To make the icon easier to use, turn it into a component. Select all the elements and click Ctrl + Alt + K (or Cmd + Option + K). This will create the Main Component. You can now create instances of it anywhere in the project.
Use Variants to manage signal states. Create variants for the following states: "Connected," "Disconnected," "Searching," and "No Internet." In the Prototype or Design panel, you can adjust the properties to change the icon's appearance directly in the layout without ungrouping it.
Adding interactivity via component properties (for example, a "Show Label" or "Signal Strength" toggle) makes your design system flexible. The user can select the desired signal strength from the drop-down list in the right panel, and the icon will automatically update.
☑️ Checking the icon's readiness
Export and optimization for the web
The final step is exporting the finished graphic. Select the frame containing the icon and select SVG in the Export panel. SVG is the preferred format for the web, as it scales without loss of quality and is lightweight. Make sure the "Outline Text" option is selected in the export settings if you used text (although this is rare for icons).
Before exporting, run the command Flatten (Ctrl + E) if you want to combine all vectors into a single path, which sometimes simplifies the SVG code but removes the ability to edit individual parts. For components, it's better to export as is, preserving the group structure.
After exporting, we recommend opening the SVG file in a text editor and removing any unnecessary metadata, comments, and attributes that Figma adds by default (for example, layer IDs if they are not needed for animation). This can reduce the file size by 30-40%, which is critical for page loading speed.
⚠️ Note: Software interfaces and browser rendering algorithms are subject to change. Always test the display of SVG icons in target browsers, especially if you use complex filters or gradients.
Frequently Asked Questions (FAQ)
How to make the WiFi icon adaptive for different screens?
Use the SVG vector format. Unlike raster graphics (PNG, JPG), vectors are mathematically recalculated at any scale. In Figma, create icons on a grid multiple of 8 or 4 and export to SVG without being tied to fixed dimensions in the code (viewbox).
What is the best plugin for drawing icons in Figma?
While built-in tools are plentiful, plugins like Iconify or Material Design Icons allow you to quickly insert ready-made sets. For designing from scratch, grid plugins like Grid & Ruler are useful, but experienced designers often make do with the native tools.
Why does my WiFi icon look blurry when exporting?
Most likely, the vector point coordinates are not snapped to integers (they are located between grid pixels). Enable Snap to Grid and ensure that the X and Y coordinates of all points are integers before exporting.
Is it possible to animate a WiFi icon created in Figma?
Yes, Figma allows you to create prototypes with animation (Smart Animate), but for full web animation, the icon needs to be exported to SVG and animated via CSS or JavaScript, or use plugins to export to Lottie (JSON).
Do I need to manually align the icon to the pixel grid?
In modern versions of Figma, Pixel Preview and Snap to Grid do a lot of the work automatically. However, for critical interface elements (small icons), manual verification in Pixel Preview mode is essential for perfect clarity.